这是我嵌入到我的网站中的视频。Fiddle. https://jsfiddle.net/hgtvqatm/
<iframe src="https://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
问题是，它很小，并且播放和其他按钮覆盖了半个屏幕。
那么有什么方法可以在播放器上添加图层图像，当您单击该图像时，视频应该开始播放。
http://codepen.io/anon/pen/grPeyq http://codepen.io/anon/pen/grPeyq
这就是我能想到的，你可以用图像替换按钮，
按钮被禁用，直到视频播放器“准备好”，这需要 jquery 2.1.4
$(function() {
document.getElementById("playbutton").disabled = true;
var player = $('iframe');
var playerOrigin = '*';
// Listen for messages from the player
if (window.addEventListener) {
window.addEventListener('message', onMessageReceived, false);
} else {
window.attachEvent('onmessage', onMessageReceived, false);
}
function onMessageReceived(event) {
var data = JSON.parse(event.data);
console.log(data.event);
if (data.event === "ready") {
//attach ready function to the image
document.getElementById("playbutton").disabled = false;
$('#playbutton').click(function() {
player[0].contentWindow.postMessage({
"method": "play"
}, playerOrigin);
$(this).remove();
});
}
}
});
#container {
position: relative
}
<div id="container">
<button style ="position:absolute; top:0; left:0;width: 300px;height:169px" id="playbutton">
Play
</button>
<iframe src="https://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0&api=1" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
