如何在iPhone中的应用程序中播放YouTube视频

时间:2015-10-05 13:14:49

标签: iphone html5 youtube uiwebview youtube-api

我正在构建一个离子/ cordova应用程序,我想在Youtube实时视频中播放视频。我使用的是YouTube API。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({"background-color": "yellow", "font-size": "200%"});
    });
});
</script>
</head>
<body>

<div id="player"></div>

<script src="youtube.js"></script>

<script>

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '200',
          width: '200',
          videoId: '0Bmhjf0rKe8',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            $('html, body').animate({
                scrollTop: $("#elementtoScrollToID").offset().top
            }, 2000);
        }
    }

</script>

<div id='elementtoScrollToID' class='my_div'>Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
</body>
</html>

使用此代码,我使用cordova 创建了 iPhone应用程序。

现在,当我点击youtube视频时,它会使用默认播放器即快速播放器播放视频。它没有在UIWebview框架内运行视频(Inside the Div)。但我想在屏幕的上半部分显示视频,即我的UIWebview框架。这可能吗?

在我的应用程序中是显示的, 点击红色播放按钮时我可以在这样的快速播放器中全屏观看视频:

enter image description here enter image description here

但我想在同一个webView框架内显示视频,而不是通过快速播放器。应该这样玩:

enter image description here

还有其他方法可以达到同样的目的吗?任何帮助将不胜感激。提前谢谢。

在Android中它完美地工作..: - )

0 个答案:

没有答案