एचटीएमएल 5

Question

में "वीडियो" टैग में स्रोत के रूप में यूट्यूब वीडियो का उपयोग कैसे करें मुझे वीडियो पर "टैगेड" ईवेंट समाप्त होने के बाद यूट्यूब वीडियो को एचटीएमएल 5 में वीडियो टैग के स्रोत के रूप में देने की ज़रूरत है, जिसमें मैं लिखता हूं कुछ प्रकार की लिपि जो दौड़ जाएगी।

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

यहाँ सभी स्थानीय वीडियो फ़ाइल के साथ ठीक काम कर रहा, केवल एक चीज मैं एक स्रोत यह तो कृपया किसी भी एक इस मेरी मदद .. अग्रिम में धन्यवाद जानता है काम नहीं कर रहा के रूप में एक यूट्यूब वीडियो देने की आवश्यकता है।

Answer 1

HTML5 YouTube यूआरएल का समर्थन नहीं करता, आप अपनी साइट के लिए एक वीडियो src आप कर सकते हैं की जरूरत है:

चरण 1: अपने पसंदीदा यूट्यूब यूआरएल

चरण 2 करने के लिए &html5=True जोड़ें: स्रोत में <video/> टैग ढूंढें

चरण 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 स्ट्रिंग कितनी देर तक काम करेगी।

अभी भी परीक्षण कर रहा है।

ध्यान दें कि यह वीडियो स्रोत उस ब्राउज़र के लिए विशिष्ट है जिसका उपयोग आप पृष्ठ स्रोत को पुनर्प्राप्त करने के लिए करते हैं। मुझे लगता है कि यूट्यूब इस एचटीएमएल को गतिशील रूप से उत्पन्न करता है (कम से कम वर्तमान में) तो परीक्षण में अगर मैं फ़ायरफ़ॉक्स में कॉपी करता हूं तो यह फ़ायरफ़ॉक्स में काम करता है, लेकिन क्रोम नहीं।

Answer 2

पॉलीफ़िल की आवश्यकता है। http://html5polyfill.com/ पर जाएं और वहां मौजूद चीज़ों की वर्तमान सूची प्राप्त करने के लिए "वीडियो" पर स्क्रॉल करें।

MediaElement.js एकमात्र ऐसा है जिसे मैंने उपयोग किया है, इसमें एक "समाप्त" ईवेंट है जिसे आप हुक कर सकते हैं। अन्य शायद भी करते हैं।