点击链接 javascript 播放 iframe 视频
Posted
技术标签:
【中文标题】点击链接 javascript 播放 iframe 视频【英文标题】：play iframe video on click a link javascript 【发布时间】：2012-11-17 03:08:05 【问题描述】：我在我的网页中使用了iframe video。这是我的html代码
<iframe id="video1" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
<a href="#" id="playvideo">Play video</a>
我需要play视频onclick播放视频链接。我该怎么做？
【问题讨论】：
【参考方案1】：这可行，它将autoplay=1 附加到 url 导致视频开始播放。
附录：如果您的视频源还没有查询字符串，那么谨慎的做法是添加? 而不是&，有时会出现这种情况。这可以通过寻找它的存在来完成。
<iframe id="video1" 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 提供支持）上不起作用
【讨论】：
如果我使用你的管视频，它工作正常。如果我使用像test.com/SF7Hg 这样的任何其他方法，它就不起作用了。 当然，上面的代码不适用于不是来自 Youtube 的视频......它是来自 Youtube API 的代码。如果您想从其他地方使用视频，则必须从他们那里获取 API（如果存在）。在某些情况下，例如当视频源的直接 URL 是公开的时，您可以将其作为 HTML5 视频元素的源嵌入到您的网站中，并使用浏览器内置 API 播放 HTML5 视频。 这个解决方案现在仍然可以正常工作 可能值得一提的是，如果视频的src中还没有参数，我认为应该是“?autoplay=1”，或者至少这是我需要的，如@ user_ivanp 已回答 也许如果您的网址缺少?enablejsapi ，正如示例中所包含的那样。但是，仅将其添加到已经存在的查询字符串是有问题的。见附录。【参考方案2】：
我正确设置在 end src - ?autoplay=1
<iframe id="video1" 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>
【讨论】：
【参考方案3】：这是另一个例子。在这里检查：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" 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>【讨论】：
【参考方案4】：因为第一个答案已经有 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>
【讨论】：
不适用于 Chrome。你得到这个错误：Untrusted origin: chrome-extension://boadgeojelhgndaghljhdicfkmllpafd【参考方案5】：
这里是示例http://jsfiddle.net/WYwv2/5/的链接
看看这个
<!DOCTYPE html>
<html>
<body>
<a href="#" id="playvideo" onclick="playme()">Play video</a>
<iframe id="video1" frameborder="0" ></iframe>
<script>
function playme()
document.getElementById("video1").src = 'http://www.w3schools.com/tags/mov_bbb.mp4';
</script>
</body>
</html>
我们动态设置视频来源。
【讨论】：
【参考方案6】：这对我有用。 请看看这个。
$("#player").on("pause", function(e)
clearTimeout(playTimeout);
);
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady()
player = new YT.Player('player',
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events:
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
);
function onPlayerReady(event)
event.target.playVideo();
var done = false;
function onPlayerStateChange(event)
if (event.data == YT.PlayerState.PLAYING && !done)
setTimeout(stopVideo, 2000);//replace time here
$("#player").get(0).load();
$("#player").get(0).pause();
done = true;
function stopVideo()
player.stopVideo();
【讨论】：
以上是关于点击链接 javascript 播放 iframe 视频的主要内容，如果未能解决你的问题，请参考以下文章
将不同的链接分配给不同的图像并让它在 iframe 容器上播放分配的 (youtube) 链接
为啥我的 UIWebView 不显示 Javascript YouTube 播放器 iFrame？
为啥我的 YouTube 链接没有在 Chrome 的 iframe 中自动播放？ [复制]