What could be wrong with this script? Both work in firebug when I tamper with them. No errors pop on the console. But when I reload the page, the script does nothing.
The purpose is to select a set of fonts, sizes, widths, etc, based on the language chosen in Video.JS Webvtt captions.
URL: http://yavaway.com/captions/
The video currently there has hardcoded "burned" captions used for visual aid to format my own caption styles.
Script 1
<script type="text/javascript">
jQuery(document).ready(function(jQuery){
/* User clicks on a caption */
jQuery('.vjs-selected').on('click',function() {
/* If the text enclosed by this element contains the string: Vietnamese add the vietnamese caption attributes and remove the english caption attributes */
if (jQuery('li.vjs-menu-item.vjs-selected:contains("Vietnamese")').length) { jQuery('#intro').addClass('viet-subs'); jQuery('#intro').removeClass('eng-caps'); }
/* If the text enclosed by this element contains the string: English add the english caption attributes and remove the vietnamese caption attributes */
if (jQuery('li.vjs-menu-item.vjs-selected:contains("English")').length) { jQuery('#intro').addClass('eng-caps'); jQuery('#intro').removeClass('viet-subs'); }
});
});
</script>
Script 2
<script type="text/javascript">
$( document ).ready(function() {
/* User clicks on a caption */
jQuery("li.vjs-selected").on("click",function() {
/* If the text enclosed by this element contains the string: English add the english caption attributes and remove the vietnamese caption attributes */ jQuery('li.vjs-menu-item.vjs-selected:contains("English")').each(function () {
jQuery(function () {
jQuery('#intro').each(function () {
jQuery(this).addClass("eng-caps");
jQuery(this).removeClass("viet-subs");
});
});
});
/* If the text enclosed by this element contains the string: Vietnamese add the vietnamese caption attributes and remove the english caption attributes */
jQuery('li.vjs-menu-item.vjs-selected:contains("Vietnamese")').each(function () {
jQuery(function () {
jQuery('#intro').each(function () {
jQuery(this).addClass("viet-subs");
jQuery(this).removeClass("eng-caps");
});
});
});
});
});
</script>
The CSS
.eng-caps .vjs-tt-cue {
background-color: rgba(0, 0, 0, 0.5);
font-family: Trebuchet MS;
font-size: 24px;
text-align: start;
color: #ff6;
}
.viet-subs .vjs-tt-cue {
background-color: none;
font-family: Arial;
font-size: 24px;
text-align: center;
color: #fff;
}