触摸视频无法播放的红色播放按钮,触摸视频上的任何其他位置即可播放。
我使用我的phonegap应用程序在IOS和Android上测试过(虽然我确定它也会在常规浏览器上发生)
仅在触摸时才会发生这种情况,即在模拟器中单击鼠标不会重现该错误。
任何想法如何解决它?
答案 0 :(得分:0)
此代码是一个解决方案,用youtube iframe api创建iframe,而在onPlayerReady中设置点击处理程序到点击时播放视频的红色按钮
不幸的是,只要youtube更改了红色按钮的类,它就会中断,希望他们能够在那时解决这个问题。
patt = /www\.youtube\.com\/watch\?.*v=([^&]*)/;
m = patt.exec(url);
if (m != null && m.length == 2) {
url = "http://www.youtube.com/embed/" + m[1] //+ "?autoplay=1"
console.log("url = " + url)
YTid = 'yt_'+m[1];
$("#mediaContentVideo").html(
"<div id='"+YTid+"'></div>"
).after(function() {
player = new YT.Player(YTid, {
height: $(window).height()/2,
width: $(window).width()*0.95,
videoId: m[1],
events: {
'onReady': onPlayerReady,
}
});
})
}
HTML
<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() {
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
console.log("hey Im ready");
$.each($('iframe'),function(i, iframe) {
d=$(iframe).get(0).contentDocument
$(".ytp-large-play-button",d).click(function() {
player.playVideo();
})
});
}
</script>
<div id="mediaContentVideo" >
</div>