• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

javascript - 让 HTML5 YouTube 播放器适合 UIWebView

[复制链接]
菜鸟教程小白 发表于 2022-12-12 19:59:59 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

我过去(在 iOS 6 中)只能“告诉”YouTube 播放器应该拉伸(stretch)到什么宽度和高度,没有问题。

此代码之前在 iOS 6 中可以使用,但现在在 iOS 7 中根本无法使用

但现在我必须将高度和宽度的值设置为比它自己的屏幕高得多(3 倍),但这当然不是解决方案,因为设备的尺寸会有所不同。 p>

这是按下按钮时运行的代码

NSString *player = @"<!DOCTYPE html>
<html>
<head><style>body{margin:0px 0px 0px 0px;}</style></head> 
<body> 

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

<script>   
var tag = document.createElement('script'); 
tag.src = \"http://www.youtube.com/player_api\"; 
var firstScriptTag = document.getElementsByTagName('script')[0];      
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var player; 

function onYouTubePlayerAPIReady() 
{ 
   player = new YT.Player('player', { width:'%0.0fpx', height:'%0.0fpx', videoId:'%@',
   playerVars: {playsinline : 1, rel:0, showinfo:0}, events: { 'onReady': onPlayerReady, } });
 } 
   function onPlayerReady(event) { event.target.playVideo(); 
} 
</script> 
</body> 
</html>"; //End of player creation string

//Then I create the html with the size of the screen
NSString *html = [NSString stringWithFormat:player,[[UIScreen mainScreen] bounds].size.width , [[UIScreen mainScreen] bounds].size.height , @"5bCRDI1BESc"];

//And then I load the html into the webview
[self.webView loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];

由此生成的 HTML 如下

<html><head><style>body{margin:0px 0px 0px 0px;}</style></head> 
<body> 
<iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="320px" height="480px" src="http://www.youtube.com/embed/5bCRDI1BESc?playsinline=1&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1"></iframe> <script src="http://s.ytimg.com/yts/jsbin/www-widgetapi-vflvlw_TO.js" async=""></script><script src="http://www.youtube.com/player_api"></script><script> var tag = document.createElement('script'); tag.src = "http://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var player; function onYouTubePlayerAPIReady() { 
player = new YT.Player('player', { width:'320px', height:'480px', 
videoId:'5bCRDI1BESc',
playerVars: {playsinline : 1, rel:0, showinfo:0}, 
events: { 'onReady': onPlayerReady, } }); 
} 
function onPlayerReady(event) { event.target.playVideo(); } </script>  </body></html>

但结果与 iOS 6 中的不一样,在 iOS 6 中,播放器填写到 whitespce (webview)。这是一张图片

Player not filling out into space

如果我将 HTML 的宽度和高度 加倍(屏幕尺寸!) 为 640 像素和 960 像素!?

double the screen size not either filling out into space

有人知道 iOS 7 中的 YouTube API 或 Safari 浏览器发生了什么吗?



Best Answer-推荐答案


这是我当前的实现:

let webView = UIWebView(...)

// get the ID of the video you want to play
let videoID = "zN-GGeNPQEg" // https://www.youtube.com/watch?v=zN-GGeNPQEg

// Replace the height and width of the player here to match your UIWebView's  frame rect
let embededHTML = "<html><body style='margin:0px;padding:0px;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>function onYouTubeIframeAPIReady(){ytplayer=new YT.Player('playerId',{events:{onReadynPlayerReady}})}function onPlayerReady(a){a.target.playVideo();}</script><iframe id='playerId' type='text/html' width='\(self.view.frame.size.width)' height='\(self.view.frame.size.height)' src='http://www.youtube.com/embed/\(videoID)?enablejsapi=1&rel=0&playsinline=1&autoplay=1' frameborder='0'></body></html>"

// Load your webView with the HTML we just set up
webView.loadHTMLString(embededHTML, baseURL: NSBundle.mainBundle().bundleURL)

这是在 UIViewController 内部,我将 View Controller 的 view 的框架作为播放器的宽度和高度传递。您应该相应地调整播放器的大小。

关于javascript - 让 HTML5 YouTube 播放器适合 UIWebView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22283514/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap