单击链接时播放 iframe 视频 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13619074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
play iframe video on click a link javascript
提问by Sam Hanson
I have used a iframe videoin my web page. This is my html code
我iframe video在我的网页中使用了一个。这是我的 html 代码
<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>
I need to playvideo onclickthe play video link. How can i do that?
我需要play视频onclick播放视频链接。我怎样才能做到这一点？
回答by Travis J
This works, it appends autoplay=1to the url causing the video to start playing.
这有效，它附加autoplay=1到导致视频开始播放的 url。
addendum: If your video's source does not already have a querystring then it would be prudent to add a ?instead of a &, as is sometimes the case. This can be done by looking for its existence.
附录：如果您的视频源还没有查询字符串，那么谨慎添加 a?而不是 a &，有时就是这种情况。这可以通过寻找它的存在来完成。
<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>
However, most people inherently understand that if they want a video to play, they will just click on it and I would suggest just leaving that to them or starting the video off with autoplay.
但是，大多数人天生就明白，如果他们想要播放视频，他们只需点击它，我建议将其留给他们或通过自动播放开始视频。
Also need to mention that autoplay does not work on mobile devices (powered by Android or iOS)
还需要提到自动播放在移动设备上不起作用（由 Android 或 iOS 提供支持）
回答by Ivan Pirus
I correctly set in end src - ?autoplay=1
我在结束 src 中正确设置 - ?autoplay=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>
回答by Enamul Haque
Here is another example. Check this here: https://codepen.io/rearmustak/pen/VXXOBr
这是另一个例子。在这里检查：https: //codepen.io/rearmustak/pen/VXXOBr
const Player = document.getElementById('player2');
const PlayBtn = document.getElementById('play');
const stopBtn = document.getElementById('stop');
let times = 0, playY;
const playVideo = PlayBtn.addEventListener( 'click' , () => {
if(times == 0){
playY = Player.src += '?autoplay=1';
times = 1;
}
});
stopBtn.addEventListener( 'click' , () => {
playY = playY.slice(0, -11);
Player.src = playY
times = 0;
});.video-frame{
overflow: hidden;
margin-bottom: 10px;
}
button{
border: none;
background-color: #e75252;
color: #ffffff;
padding: 10px 15px;
border-radius: 3px;
cursor: pointer;
}
button:focus{
outline: 0;
}
#stop{
background-color: #ff0002;
}<h1>Youtube video Play/Stop</h1>
<div class="video-frame">
<iframe id="player2" width="560" height="315" src="https://www.youtube.com/embed/cs1e0fRyI18" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<button id="play">Play</button>
<button id="stop">Stop</button>回答by Danny
since the first answer is already 3 years old, let me point to the Youtube Player API. With that you can remote control your embedded player. See https://developers.google.com/youtube/iframe_api_reference?hl=en
由于第一个答案已经 3 岁了，让我指出 Youtube Player API。有了它，您可以远程控制您的嵌入式播放器。请参阅https://developers.google.com/youtube/iframe_api_reference?hl=en
With a small adjustment, you can start the video via link and without reloading the entire iframe:
只需稍作调整，您就可以通过链接启动视频，而无需重新加载整个 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>
回答by ameya rote
here is link to example http://jsfiddle.net/WYwv2/5/
这是示例的链接http://jsfiddle.net/WYwv2/5/
Check out this
看看这个
<!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>
?
We set the source of video dynamically.
我们动态设置视频源。
