单击链接播放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

回答

相关问题