使用JavaScript更改HTML 5.0視頻上的視頻分辨率

Question

更新：我使用的是Fotorama插件，看起來底部菜單導致了問題。通過在視頻標籤周圍放置div標籤來禁用該菜單使得設置分辨率的功能起作用。感謝您的幫助和鼓勵。對於底部菜單，我使用鏈接按鈕創建一個簡單的鏈接，鏈接到下一個視頻的類似頁面。

我已經編寫了基於輸入選項/選擇元素來改變視頻分辨率的JavaScript代碼。有用。問題是，它停止工作，當我把完全相同的代碼在函數內部（這樣的代碼可以被執行多次 - 每個選項/選擇元素改變時）

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

這裏該選項/選擇元素代碼：

<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> 

下面是視頻代碼：

<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> 

這裏是昌代碼荷蘭國際集團的分辨率（工程時，沒有一個函數）：

<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> 

感謝

Answer 1

在您head標籤的地方這<script src="jquery-1.12.2.js" charset="utf-8"></script>包括因爲您使用的是從jQuery函數jQuery庫。 ，並從該行

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

將其更改爲

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

和編輯你的腳本如下的jQuery的規則，進行適當的聲明如下。我刪除$變量，雖然這是有效的，在其聲明與var

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 

    } 

通知，以便JavaScript就知道他們是變量。

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

代碼是做什麼的，它會跟蹤你的下拉變化，如果改變，函數將執行。

希望這將有助於

Answer 2

我用的是Fotorama插件，似乎底部菜單是造成問題。通過在視頻標籤周圍放置div標籤來禁用該菜單使得設置分辨率的功能起作用。感謝您的幫助和鼓勵。對於底部菜單，我使用鏈接按鈕創建一個簡單的鏈接，鏈接到下一個視頻的類似頁面。