我正在构建一个离子/ 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框架。这可能吗?
在我的应用程序中是显示的, 点击红色播放按钮时我可以在这样的快速播放器中全屏观看视频:
但我想在同一个webView框架内显示视频,而不是通过快速播放器。应该这样玩:
还有其他方法可以达到同样的目的吗?任何帮助将不胜感激。提前谢谢。
在Android中它完美地工作..: - )