实现：使用WKWebview实现一个简单的直播播放界面。这里是用WKWebview加载本地HTML文件实现的，也可以由web前端人员来实现，这里并没有采用这种方式。
问题：1.播放器的样式和需求的不符合；2.使用这种方式加载出来的视频界面有白边。下面说一下解决方法
NSString *path = [[NSBundle mainBundle] pathForResource:@"xxxx.html" ofType:nil];
NSString *content = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] resourcePath]];
[self.webview loadHTMLString:content baseURL:baseURL];
这是加载本地HTML文件的代码
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="xxxx.css">
</head>
<body>
<script src="https://player.polyv.net/livescript/liveplayer.js"></script>
<div id='player'></div>
<script type="text/javascript">
var _width = document.body.clientWidth || document.documentElement.clientWidth;
var _height = _width * 9/16;
var player = polyvObject('#player').livePlayer({
'width':'100%',
'height':_height,
'uid':'xxxxxxxxx',
'vid':'xxxxxxxxx',
'hideBar':true,
});
</script>
</body>
</html>
本地HTML文件的代码，这是第三方提供的代码，做了一些改动。
播放器的属性中有一个'hideBar':true，这个就隐藏了web播放器的播放、全屏等按钮，然后自己实现一个播放界面，通过oc调用js的方法实现控制播放器的全屏和播放的的功能。
实现之后发现webview的各边都会有白边，也是因为不懂js的关系，怎么弄都弄不好。后来通过
NSString *htmlstr = [NSString stringWithContentsOfURL:[NSURL URLWithString:urlStr] encoding:(NSUTF8StringEncoding) error:nil];
这个方法打印了第三方的html文件的代码（urlStr就是html文件的地址），发现里边使用了一个.css文件，直接把这个css文件的地址放到本地HTML文件里，试一下发现白边消失了。把这个地址放到浏览器上然后就看到了这个css文件的内容。
我又在桌面创建的一个文本编辑的文件，修改扩展名为.css，导入工程，把之前的浏览器上看到的css文件的内容拷贝进去，然后就有了本地HTML文件里的这段代码<link rel="stylesheet" href="xxxx.css">。
这里注意一下，这里HTML文件加载了本地的css文件，可以这么做是因为webview是这样加载HTML文件的[self.webview loadHTMLString:content baseURL:baseURL]，这里的baseURL就是本地资源的路径，因此可以使用本地的css文件（图片等资源也是一样）。这个css文件的内容很多，但是我需要的代码只有一句
html,body,div,h1,h2,h3,h4,h5,h6,img,a,p,span,textarea,ul,li,input,button{margin: 0;padding: 0;font-family: "寰蒋闆呴粦";box-sizing: border-box;}
再删一些实际上这么写就行了
body{margin:0; padding:0;}
所以这里只设置一下margin和padding就好了，找了那么久一脸蒙蔽。因为不懂js也算可以理解吧。
这篇文章说的有点啰嗦，不过有类似问题的小伙伴也可以尝试使用这种解决问题的方式解决一下，有比较好的方法希望大神可以告知、指正。
网友评论