Changing video resolution on HTML 5.0 video with JavaScript

Question

UPDATE: I was using the Fotorama plugin and it seems that the bottom menu was causing the problem. Disabling that menu by putting div-tags around the video-tags made the function for setting resolution work. Thanks for the help and encouragement. For the bottom menu I create a simple one using link buttons that link to a similar page with the next video.

I have written JavaScript code that changes the resolution of a video based on input of a option/select-element. It works. The problem is that it stops working when I put exactly the same code inside a function (so that the code can be executed multiple times - each time option/select-element is changed.)

Here is an image of the videoplayer and the option/select-element I have added

Here is the code for the option/select-element:

<li class="porfolionav">
    <select id="selectQuality" onchange="changeVidQualityFunction()">
        <option value="1080" selected="selected" disabled="disabled">Videokvalitet</option>
        <option value="1080" id="1080">HD 1080</option>
        <option value="480" id="480">SD 480</option>
        <option value="320" id="320">SD 320</option>
    </select>
</li>

Here is the code for the videos:

<div class="fotorama" data-width="1209px" data-height="680px" data-allowfullscreen="false" data-arrows="true" data-click="true" data-swipe="true" data-autoplay="false" data-transition="slide" data-clicktransition="slide" data-shuffle="false">
  <video id="video1V" height="680px" controls data-caption="320 OGG" poster="videos/img/thumb1.jpg">
    <source src="videos/test_q_320" id="video1">Your browser does not support HTML5 video.
    </video>
  <video id="video2V" height="680px" controls data-caption="480 OGG" poster="videos/img/thumb2.jpg">
    <source id="video2" src="videos/test_q_480.ogg" id="video2">Your browser does not support HTML5 video.
    </video>
  <video id="video3V" height="680px" controls data-caption="1080 OGG" poster="videos/img/thumb3.jpg">
    <source id="video3" src="videos/test_q_1080.ogg" id="video3">Your browser does not support HTML5 video.
    </video>
</div>

And here is the code for the changing resolution (works when not in a function):

<script>
    function changeVidQualityFunction(){

    $chosenVidQuality = document.getElementById("selectQuality").value;
    $trulycompletevideolink = document.getElementById("video1").src;
    $step1 = document.getElementById("video1").src.split("_q_");
    //COMMENT: step1[0] is the url from start and including the first part of the filename (not the "_q_"-part and the format)
    $upToVidName = $step1[0];
    //COMMENT: step1[1] is the resolution and format, e.g. 320.ogg
    $step2 = $step1[1].split(".");
    //COMMENT: step2[0] is the resoltion e.g. 720 ,step2[1] is the format (without the dot in front of the format type) e.g. ogg
    $vidresolution = $step2[0];
    $vidformat = $step2[1];

        $vidresolution = $chosenVidQuality;
        $result = $upToVidName+"_q_"+$vidresolution+"."+$vidformat;
         $('#video1').attr('src', $result);
         $('#video1V').attr('data-caption', $vidresolution+" OGG");
         $('#video1V').load();

          window.alert("video1 attr src:"+document.getElementById("video1").src); //shows updated URL

}
          </script>

Thanks

Answer 1

On your head tag place this <script src="jquery-1.12.2.js" charset="utf-8"></script> to include jquery library since your are using functions from jquery. and from this line

<select id="selectQuality" onchange="changeVidQualityFunction()">

change it to

<select id="selectQuality" name="video_selected">

and edit your script that follows the rule of jquery, make proper declarations as follows.

function changeVidQualityFunction() {
        var ev = $('#selectQuality').val();
        console.log(ev);
    var chosenVidQuality       = $('#selectQuality').val();
    var trulycompletevideolink = document.getElementById("video1").src;
    var step1                  = document.getElementById("video1").src.split("_q_");
    //COMMENT: step1[0] is the url from start and including the first part of the filename (not the "_q_"-part and the format)
    var upToVidName            = step1[0];
    //COMMENT: step1[1] is the resolution and format, e.g. 320.ogg
    var step2                  = step1[1].split(".");
    //COMMENT: step2[0] is the resoltion e.g. 720 ,step2[1] is the format (without the dot in front of the format type) e.g. ogg
    var vidresolution = step2[0];
    var vidformat = step2[1];

        vidresolution = chosenVidQuality;
        var result = upToVidName + "_q_" + vidresolution + "." + vidformat;
         $('#video1').attr('src', result);
         $('#video1V').attr('data-caption', vidresolution+" OGG");
         $('#video1V').load();

      window.alert("video1 attr src:"+document.getElementById("video1").src); //shows updated URL

    }

notice that I remove $ of the variable although this is valid, an declare it with var so javascript will know that they are variables.

    $(document).ready(function(){
        $('#selectQuality').change(function(){
            changeVidQualityFunction();
        });
    });

What the code do is, it will track for a change on your drop down, if change, the function will execute.

Hope this will help

Answer 2

I was using the Fotorama plugin and it seems that the bottom menu was causing the problem. Disabling that menu by putting div-tags around the video-tags made the function for setting resolution work. Thanks for the help and encouragement. For the bottom menu I create a simple one using link buttons that link to a similar page with the next video.