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