HTML5의 "video"태그에 youtube video를 사용하는 방법

동영상이 끝나면 HTML5에서 동영상 태그의 소스로 YouTube 동영상을 제공해야합니다. "onended"이벤트는 내가 작성한 이벤트에서 실행됩니다. 어떤 종류의 스크립트가 실행됩니다.HTML5의 "video"태그에 youtube video를 사용하는 방법

<video id="videoSource" style="visibility:visible" width="1000" height="500" controls="controls" onended="hideVideo()"> 
<source src="**Youtube Video Link Goes here**" type="video/mp4" /> 
</video> 

<script type="text/javascript"> 
function hideVideo() { 
document.getElementById("videoSource").style.visibility="hidden"; 
} 
</script>

여기에 모든 로컬 비디오 파일을 잘 작동, 유일한 것은 내가 그렇게 하나가이 사전에 .. 감사를 도와 알고하십시오 작동하지 않는 소스로 유튜브 비디오를 줄 필요가있다. 소스 <video/> 태그를 찾기 :

1 단계 : 좋아하는 YouTube URL

2 단계에 &html5=True를 추가 당신은 당신이 할 수있는 귀하의 사이트에 대한 비디오 SRC 필요한 경우

출처

2012-05-03 Yuva

HTML5는, 유튜브 URL을 지원하지 않습니다

3 단계 : 비디오 태그에 controls="controls" 추가 : <video controls="controls"..../>

예 :

<video controls="controls" 
     class="video-stream" 
     x-webkit-airplay="allow" 
     data-youtube-id="N9oxmRT2YWw" 
     src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;id=37da319914f6616c"></video>

참고로 일부 expire 것으로 보입니다. src 문자열이 얼마나 오래 작동하는지 모르겠습니다.

나 자신을 테스트하고 있습니다.

이 비디오 src는 페이지 소스를 검색하는 데 사용하는 브라우저에만 해당됩니다. 필자가 Firefox에서 복사 할 경우 Youtube가이 HTML을 동적으로 (적어도 현재는) 생성하므로 Firefox에서는 작동하지만 Chrome에서는 작동하지 않는다고 생각합니다.

출처

2012-05-03 07:37:11

답변 해 주셔서 감사합니다. 나는 위의 코드를 시도했지만 비디오를 표시하지 않습니다 .. 'X'표시 .. – Yuva

polyfill이 필요합니다. http://html5polyfill.com/으로 이동하여 '동영상'으로 스크롤하여 현재의 목록을 가져옵니다.

MediaElement.js는 내가 사용한 유일한 미디어이며 "종료 된"이벤트가 있습니다. 다른 사람들도 아마 그렇게 할 것입니다.

출처

2014-05-23 18:10:27

HTML5의 "video"태그에 youtube video를 사용하는 방법

답변

관련 문제