使用他们的 API 为嵌入的 YouTube 视频创建自定义播放按钮很容易,但是该按钮似乎无法在移动环境中启动视频,尤其是 Android。当您在此处单击它时,屏幕将永远变黑,并带有旋转的加载动画。
<div id="wrapper">
<div id="video">
</div>
<a href="javascript:;" id="play">Play</a>
</div>
<script>
var player, tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('video', {
height: '320',
width: '240',
videoId: '5oxIQe3XngY',
playerVars: {
modestbranding: 1,
controls: 0,
rel: 0
}
});
player.addEventListener('onReady', function(e) {
document.getElementById('play').onclick = function() {
player.playVideo();
};
});
player.addEventListener('onStateChange', function(e) {
if (e.data == 1) {
document.getElementById('play').style.display = 'none';
}
});
};
</script>
这是小提琴:http: //jsfiddle.net/HArsN/
有什么解决办法吗?是否必须仅通过捆绑按钮启动视频?