youtube iframe - phonegap - 触摸/点击视频无法播放的红色播放按钮

时间:2014-10-02 06:17:34

标签: cordova youtube

触摸视频无法播放的红色播放按钮,触摸视频上的任何其他位置即可播放。

我使用我的phonegap应用程序在IOS和Android上测试过(虽然我确定它也会在常规浏览器上发生)

仅在触摸时才会发生这种情况,即在模拟器中单击鼠标不会重现该错误。

任何想法如何解决它?

1 个答案:

答案 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>