-
I have a scenario where I have videos in different languages that the user can bring up when choosing an option from a JS dropdown selection box. My question – Is there a way to pause a video when another selection is made if it was clicked for playing. For instance, let’s say the user selects an “English” option. My English video is loaded via the FV shortcode, then the user clicks play. But then they decide they want to load the “Chinese” video instead. So they do that, but the English video is still playing in the background. How do you get the previous video to pause when another video is selected. Here is my code.
<style>
.inv {
display: none;
}
</style>
<select id=”target” class=”lang_select”>
<option value=”” selected=”selected”>Select</option>
<option value=”ar”>Arabic</option>
<option value=”zh”>Chinese</option>
<option value=”en”>English</option>
<option value=”jp”>Japanese</option>
<option value=”ko”>Korean</option>
<option value=”ru”>Russian</option>
</select>
<div id=”ar” class=”inv”>[fvplayer id="1"]</div>
<div id=”zh” class=”inv”>[fvplayer id="2"]</div>
<div id=”en” class=”inv”>[fvplayer id="3"]</div>
<div id=”jp” class=”inv”>[fvplayer id="4"]</div>
<div id=”ko” class=”inv”>[fvplayer id="5"]</div>
<div id=”ru” class=”inv”>[fvplayer id="6"]</div>
</div>
<script>
document
.getElementById(‘target’)
.addEventListener(‘change’, function (){
‘use strict’;
var vis = document.querySelector(‘.vis’),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = ‘inv’;
}
if (target !== null ) {
target.className = ‘vis’;
}
});
</script>