通過URL傳遞變量以更改源標記

Question

我有15個視頻需要顯示。而不是創建15個頁面，每個html5視頻嵌入一個不同的視頻，我寧願只有一個頁面，並通過URL告訴玩家要加載什麼。這樣我可以擁有15個自定義鏈接，但只有一個播放器和一個HTML頁面。需要所有瀏覽器，iOS和Android都支持此功能。

實施例：

• www.mysite.com/videoplayer.html?v=mymovie

• www.mysite.com/videoplayer.html?v=mymovie &噸= 13.6 - 這應該跳轉到玩家播放頭的時間點。

videoplayer.html

<script> 
    function getQueryVariable(variable) { 
     var query = window.location.search.substring(1); 
     var vars = query.split("&"); 
     for (var i=0;i<vars.length;i++) { 
      var pair = vars[i].split("="); 
      if (pair[0] == variable) { 
       return pair[1]; 
      } 
     } 
     alert('Query Variable ' + variable + ' not found'); 
    } 
    var videoFile = getQueryVariable("v"); 
    var videoElement = document.getElementById("mp4source"); 
    videoElement.setAttribute("source", videoFile + ".mp4"); 
</script> 

<video id="mp4" controls="controls"> 
    <source id="mp4source" src="../videos/jude.mp4" type="video/mp4" /> 
</video> 

main.html中

<div id="menubar1"> 
    <a href="videoplayer.html?v=mymovie">Play Movie</a> 
    <a href="videoPlayer.html?v=mymovie&t=14.5">Chapter 2</a> 
</div> 

我是一個初學者的JavaScript，請具體說明在你的答案。

謝謝。

Answer 1

恕我直言DOM Manipulation在主頁上將是一個更好的解決方案，但在這裏，至少對於現代瀏覽器，從您的示例代碼。

• 我改變你的getQueryVariable，以便能夠使用它作爲一個 布爾值。

• 要改變當前的播放時間，你將不得不等待 視頻的元數據被加載，那麼你可以設置currentTime 財產（以秒爲單位）。

• 爲了遵守該「所有的瀏覽器」支持你將不得不 來轉碼影片的Ogg Vorbis格式，然後添加一個source指向 這個視頻文件。這將適用於主要的現代瀏覽器。

• 對於舊版瀏覽器，您將不得不添加一個fallback（例如flash player或java applet）。

• 對於在IOS「跳躍播放頭」，你有一些技巧，以做到：看this question，我個人使用this code這似乎對我的iPad等iOS工作8.注意，它會缺少autoplay如果您決定將其添加到video標記中。

• 現在，您無法獲得所有瀏覽器的視頻（例如text-based browsers）。

  ---

直播例

---

  Play Movie                               Chapter 2

---

評論videoplayer.html

<video id="video" controls="controls"> 
    <source id="mp4source" src="" type="video/mp4" /> 
    <source id="oggSource" src="" type="video/ogg" /> 
</video> 

<script> 
    function getQueryVariable(variable) { 
     var query = window.location.search.substring(1); 
     var vars = query.split("&"); 
     for (var i = 0; i < vars.length; i++) { 
      var pair = vars[i].split("="); 
      if (pair[0] == variable) { 
       return pair[1]; 
      } 
     } 
     //returning false will help knowing if that variable exists 
     return false; 
    } 

    function loadVideo() { 
     var videoFile = getQueryVariable("v"); 

     //if v is not set 
     if (!videoFile) { 
      alert('please choose a video file, \n maybe you came here by accident?'); 
      //no need to go further 
      return; 
     } 

     //Select the sources for the mp4 and the ogg version 
     var mp4source = document.getElementById("mp4source"); 
     mp4source.setAttribute("src", videoFile + ".mp4"); 
     var oggSource = document.getElementById("oggSource"); 
     oggSource.setAttribute("src", videoFile + ".ogv"); 

     //if t is set 
     if (getQueryVariable("t")) { 
      //userAgent can be overridden but it may be the best way to detect ios devices 
      var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/) !== null; 
      if (iOS) { 
       iOSLoadSeek(); 
      } else { 
       //wait for the video meta data to be loaded 
       document.getElementById('video').addEventListener('loadedmetadata', function() { 
        //then change the time position 
        this.currentTime = getQueryVariable("t"); 
       }) 
      } 
     } 
    } 

    //ios load seek workaround, edited from https://gist.github.com/millermedeiros/891886 
    function iOSLoadSeek() { 
     var vid = document.getElementById('video'); 
     if (vid.readyState !== 4) { //HAVE_ENOUGH_DATA 
      vid.addEventListener('canplaythrough', iosCanPlay, false); 
      vid.addEventListener('load', iosCanPlay, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch. 
      vid.addEventListener('play', iosCanPlay, false); //Actually play event seems to be faster 
      vid.play(); 
      setTimeout(function() { 
       vid.pause(); //block play so it buffers before playing 
      }, 10); //it needs to be after a delay otherwise it doesn't work properly. 
     } 
    } 
    //called when one of the three events fires 
    function iosCanPlay() { 
     //remove all the event listeners 
     this.removeEventListener('canplaythrough', iosCanPlay, false); 
     this.removeEventListener('load', iosCanPlay, false); 
     this.removeEventListener('play', iosCanPlay, false); 
     //finally seek the desired position 
     this.currentTime = getQueryVariable("t"); 
     this.play(); 
    } 

    //When the page is loaded, execute 
    window.onload = loadVideo(); 
</script>