Cách sử dụng video youtube làm nguồn trong thẻ "video" trong HTML5

Question

Tôi cần phải cung cấp video youtube làm nguồn video vào thẻ HTML5 trong khi video đã phát xong sự kiện "được khắc phục" sẽ kích hoạt trong đó tôi viết một số loại kịch bản sẽ chạy.

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

Ở đây tất cả làm việc tốt với tập tin video cục bộ, chỉ có điều là tôi cần phải cung cấp cho một đoạn video youtube như một nguồn nó không làm việc vì vậy hãy bất kỳ ai biết điều này giúp tôi .. Cảm ơn trước.

Answer 1

Html5 không hỗ trợ youtube url, Nếu bạn cần một src video cho trang web của bạn, bạn có thể làm:

Bước 1: thêm &html5=True để url youtube mà bạn yêu thích

Bước 2: Tìm <video/> thẻ trong nguồn

Bước 3: Thêm controls="controls" vào thẻ video: <video controls="controls"..../>

Ví dụ:

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

Lưu ý rằng có vẻ như một số công cụ expire. Tôi không biết chuỗi src sẽ hoạt động trong bao lâu.

Vẫn tự kiểm tra.

Lưu ý rằng video này src dành riêng cho trình duyệt bạn sử dụng để truy xuất nguồn trang. Tôi nghĩ rằng Youtube tạo ra HTML động này (ít nhất là hiện tại) vì vậy trong thử nghiệm nếu tôi sao chép trong Firefox này hoạt động trong Firefox, nhưng không phải Chrome.

Answer 2

Yêu cầu polyfill. Truy cập http://html5polyfill.com/ và cuộn xuống "video" để xem danh sách hiện tại của những gì đang diễn ra ở đó.

MediaElement.js là trang duy nhất tôi đã sử dụng, nó có sự kiện "đã kết thúc" mà bạn có thể móc. Những người khác có thể làm quá.