Jak korzystać z wideo youtube jako źródła w tagu "wideo" w HTML5

Question

Muszę nadać filmowi youtube jako źródło tagu wideo w HTML5, gdy wideo zakończy odtwarzanie "onended" wydarzenie zostanie uruchomione w tym, co napiszę jakiś skrypt, który będzie działał.

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

Tutaj wszystko działa poprawnie z lokalnego pliku wideo Jedyną rzeczą jest to muszę dać film youtube jako źródło nie działa więc proszę ktoś wie, to może mi pomóc .. z góry dzięki.

Answer 1

HTML5 nie obsługuje URL YouTube, Jeśli potrzebujesz src wideo na swojej stronie można zrobić:

Krok 1: Dodawanie &html5=True ulubionej URL YouTube

Krok 2: Znajdź <video/> tag w źródle

Etap 3: Dodać controls="controls" do znacznika wideo: <video controls="controls"..../>

przykład:

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

Uwaga: wydaje się, że istnieje kilka rzeczy związanych z expire. Nie wiem, jak długo będzie działał ciąg znaków src.

Wciąż testuję siebie.

Należy pamiętać, że ten plik wideo jest związany z przeglądarką używaną do pobierania źródła strony. Wydaje mi się, że Youtube dynamicznie generuje ten HTML (przynajmniej w tej chwili), więc jeśli testuję w Firefoksie, to działa on w przeglądarce Firefox, ale nie w Chrome.

Answer 2

Wymaga folii polyfill. Przejdź do http://html5polyfill.com/ i przewiń w dół do "wideo", aby uzyskać aktualną listę rzeczy, które tam są.

MediaElement.js to jedyny, którego użyłem, ma "zakończone" wydarzenie, które można podłączyć. Inni prawdopodobnie też.