play iframe वीडियो को एक लिंक पर क्लिक करें जावास्क्रिप्ट

मैंने अपने वेब पेज में iframe video का उपयोग किया है। यह मेरा html कोडplay iframe वीडियो को एक लिंक पर क्लिक करें जावास्क्रिप्ट

<iframe id="video1" width="520" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe> 
<a href="#" id="playvideo">Play video</a>

मैं play वीडियो onclick प्ले वीडियो लिंक की जरूरत है। मैं उसे कैसे कर सकता हूँ?

स्रोत

2012-11-29 Sam Hanson

यह काम करता है, यह यूआरएल में autoplay=1 जोड़ता है जिससे वीडियो खेलना शुरू हो जाता है।

परिशिष्ट: अपने वीडियो का स्रोत पहले से ही एक क्वेरी स्ट्रिंग नहीं है, तो फिर यह एक & के बजाय एक ? जोड़ने के लिए, के रूप में कभी कभी मामला है समझदारी होगी। यह अपने अस्तित्व की तलाश करके किया जा सकता है।

<iframe id="video1" width="520" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe> 
<a href="#" id="playvideo">Play video</a> 
<script> 
//use .one to ensure this only happens once 
$("#playvideo").one(function(){ 
    //as noted in addendum, check for querystring exitence 
    var symbol = $("#video1")[0].src.indexOf("?") > -1 ? "&" : "?"; 
    //modify source to autoplay and start video 
    $("#video1")[0].src += symbol + "autoplay=1"; 
}); 
</script>

हालांकि, ज्यादातर लोगों को स्वाभाविक समझते हैं कि अगर वे चलाने के लिए वीडियो चाहते हैं, वे तो बस उस पर क्लिक करेंगे और मैं सिर्फ उन्हें है कि छोड़ने या वीडियो ऑटोप्ले के साथ बंद शुरू करने का सुझाव देते हैं।

इसके अलावा मोबाइल उपकरणों पर काम नहीं करता है (Android या iOS द्वारा संचालित)

स्रोत

2012-11-29 05:08:09

अगर मैं आपको ट्यूब वीडियो का उपयोग करता हूं तो यह ठीक काम कर रहा है। अगर मैं किसी अन्य का उपयोग करता हूं जैसे http://test.com/SF7Hg यह काम नहीं कर रहा है। –

स्वाभाविक रूप से ऊपर दिया गया कोड उस वीडियो पर काम नहीं करेगा जो यूट्यूब से नहीं है ... यह यूट्यूब एपीआई से कोड है। यदि आप कहीं और से वीडियो को उपयोगकर्ता बनाना चाहते हैं, तो आपको उनसे एक एपीआई प्राप्त करना होगा (यदि कोई मौजूद है)। कुछ मामलों में, जैसे कि जब वीडियो स्रोत का सीधा यूआरएल सार्वजनिक होता है, तो आप इसे एचटीएमएल 5 वीडियो तत्व के स्रोत के रूप में अपनी साइट में एम्बेड कर सकते हैं और एचटीएमएल 5 वीडियो प्लेबैक के लिए ब्राउज़र में अंतर्निहित एपीआई का उपयोग कर सकते हैं। – jlmcdonald

आपके उत्तर के लिए धन्यवाद –

यहाँ

उदाहरण के लिए लिंक http://jsfiddle.net/WYwv2/5/

चेक बाहर इस

<!DOCTYPE html> 
<html> 
<body> 
<a href="#" id="playvideo" onclick="playme()">Play video</a> 
    <iframe id="video1" width="520" height="360" frameborder="0" ></iframe> 
<script> 
function playme() { 
document.getElementById("video1").src = 'http://www.w3schools.com/tags/mov_bbb.mp4'; 
} 
</script> 
</body> 
</html>

हम सेट किया गया है कि ऑटोप्ले का उल्लेख करने की जरूरत है गतिशील रूप से वीडियो का स्रोत।

स्रोत

2012-11-29 05:21:14

यह मेरे लिए काम करता है इसलिए मैं भी वोट-अप करता हूं। –

क्योंकि पहला उत्तर पहले से ही 3 साल पुराना है, मुझे यूट्यूब प्लेयर एपीआई को इंगित करने दें। इसके साथ आप अपने एम्बेडेड प्लेयर को रिमोट कंट्रोल कर सकते हैं। देखें https://developers.google.com/youtube/iframe_api_reference?hl=en

एक छोटे से समायोजन के साथ, आप लिंक के माध्यम से और पूरे आइफ्रेम पुन: लोड के बिना वीडियो शुरू कर सकते हैं:

<!DOCTYPE html> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 

    <!-- The Play-Link will appear in that div after the video was loaded --> 
    <div id="play"></div> 

    <script> 
     // 2. This code loads the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 

     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // 3. This function creates an <iframe> (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'M7lc1UVf-VE', 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
     //event.target.playVideo(); 
     document.getElementById('play').innerHTML = '<a href="#" onclick="play();">Play Video</a>'; 
     } 

     function play(){ 
     player.playVideo(); 
     } 

     // 5. The API calls this function when the player's state changes. 
     // The function indicates that when playing a video (state=1), 
     // the player should play for six seconds and then stop. 
     var done = false; 
     function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
      setTimeout(stopVideo, 6000); 
      done = true; 
     } 
     } 
     function stopVideo() { 
     player.stopVideo(); 
     } 
    </script> 
    </body> 
</html>

स्रोत

2015-11-25 08:42:52 Danny

क्रोम पर काम नहीं करता है। आपको यह त्रुटि मिलती है: 'अविश्वसनीय उत्पत्ति: क्रोम-एक्सटेंशन: // boadgeojelhgndaghljhdicfkmllpafd' – AjaxLeung

मैं सही ढंग से अंत src में सेट - ऑटोप्ले = 1

<iframe id="video1" width="450" height="280" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe> 
    <a href="#" id="playvideo">Play button</a> 
    <script> 
    $("#playvideo").click(function(){ 
     $("#video1")[0].src += "?autoplay=1"; 
    }); 
    </script>

स्रोत

2017-05-19 11:00:32

play iframe वीडियो को एक लिंक पर क्लिक करें जावास्क्रिप्ट

उत्तर

संबंधित मुद्दे