URL을 통해 변수를 전달하여 소스 태그 변경

Question

표시해야하는 15 개의 비디오가 있습니다. 다른 동영상을 타겟팅하는 각 html5 동영상 퍼가기가있는 15 페이지를 만드는 대신 한 페이지 만 있고 URL을 통해 플레이어에게 무엇을로드할지 알려줍니다. 이 방법으로 나는 단지 15 개의 커스텀 링크를 가질 수 있지만 단 하나의 플레이어와 하나의 HTML 페이지를 가질 수있다. 모든 브라우저, iOS 및 Android에서 지원되어야합니다.

예 :

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

• www.mysite.com/videoplayer.html?v=mymovie t = & 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> 

내가 자바 스크립트에 초보자 해요, 답의 특정 주시기 바랍니다.

감사합니다.

Answer 1

메인 페이지의 IMHO DOM Manipulation은 더 나은 해결책이 될 것이지만, 현재는 모던 브라우저의 경우 예제 코드에서 볼 수 있습니다.

• 은 내가 부울로 사용할 수 있도록 여러분의 getQueryVariable을 변경했습니다.

• 그런 다음 (초) currentTime 속성을 설정할 수 있습니다, 당신은로드 할 비디오의 메타 데이터에 대한 기다려야 할 것이다, 현재 재생 시간을 변경합니다. "모든 브라우저를"을 준수하기 위해

지원 당신이 보비스 형식에는 OGG하기 위해 동영상을 변환 할 이있을 것이다, 다음 source가 이 비디오 파일을 가리키는 추가 할 수 있습니다. 이것은 주요 현대 브라우저를 위해 할 것입니다. 이전 버전의 브라우저를 들어

• , 당신은 fallback (예를 들어, 플래시 플레이어, 자바 애플릿)를 추가해야합니다. IOS에 "재생 헤드를 점프"를 를 들어

• , 당신이 몇 가지 트릭이 : 개인적으로 내 아이 패드 iOS에서이 autoplay의 부족 것이라고 8 주를 작동하는 것 같다 this code을 사용 this question보고 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>