單擊鏈接播放iframe視頻javascript

我在我的網頁中使用了iframe video。這是我的html代碼單擊鏈接播放iframe視頻javascript

<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它不起作用。 –

自然，上面的代碼不適用於不是來自Youtube的視頻...它是來自Youtube API的代碼。如果你想從其他地方使用視頻，你必須從他們那裏獲得一個API（如果存在的話）。在某些情況下，例如當視頻源的直接網址爲公開時，您可以將其作爲HTML5視頻元素的來源嵌入到您的網站中，並使用瀏覽器內置API進行HTML5視頻播放。 – 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歲了，讓我指向Youtube Player API。有了這個你可以遠程控制你的嵌入式播放器。見https://developers.google.com/youtube/iframe_api_reference?hl=en

有了一個小的調整，您可以通過鏈接，而無需重新加載整個IFRAME啓動視頻：

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

在Chrome上不起作用。你得到這個錯誤：'不受信任的來源：chrome-extension：// 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

單擊鏈接播放iframe視頻javascript

回答

相關問題