最近有个需求在h5页面中加载视频,并在网页内自动播放。但是实际呢视频不会在网页直接播放,而是弹出视频播放器全屏播放。
解决办法:
1.h5标签中要设置video标签
<video width="100%" height="176" controls autoplay playsinline webkit-playsinline>
<source src="{播放源文件地址}" type="video/mp4">
</video>
iOS端webView设置(UIWebView在 iOS 8.0之后可使用WKWebView替代)
self.webView.allowsInlineMediaPlayback = YES;
self.webView.mediaPlaybackRequiresUserAction = NO;
allowsInlineMediaPlayback解释
A Boolean value that determines whether HTML5 videos play inline or use the native full-screen controller.
You must set this property to play inline video. Set this property to true to play videos inline. Set this property to false to use the native full-screen controller. When adding a video element to a HTML document on the iPhone, you must also include the playsinline attribute.
The default value for iPhone is false and the default value for iPad is true.
Apps created before iOS 10.0 must use the webkit-playsinline attribute.
如果是在网页内播放视频的话, allowsInlineMediaPlayback要设置为YES;如果全屏控制器播放,就要设置这个属性为NO。
这个属性在 iPhone 上默认为NO, 在 iPad 上默认为YES。因此要在网页内播放,要将这个属性设置为YES。
mediaPlaybackRequiresUserAction 解释
A Boolean value that determines whether HTML5 videos can play automatically or require the user to start playing them.
The default value on both iPad and iPhone is true. To make media play automatically when loaded, set this property to false and ensure the <audio> or <video> element you want to play has the autoplay attribute set.
iPhone and iPad Safari both default to YES
是否要求用户操作播放,NO代表自动播放,YES需要用户点击才能播放。
以上2个属性都已舍弃,官网文档上已标注Deprecated。
因为 iOS 10.0以后WKWebView的出现,UIWebView不再支持,所以UIWebView中没有可替代的属性,WKWebView使用WKWebViewConfiguration中的WKAudiovisualMediaTypes替代mediaPlaybackRequiresUserAction。
WKAudiovisualMediaTypeNone即为自动播放。
typedef NS_OPTIONS(NSUInteger, WKAudiovisualMediaTypes) {
WKAudiovisualMediaTypeNone = 0,
WKAudiovisualMediaTypeAudio = 1 << 0,
WKAudiovisualMediaTypeVideo = 1 << 1,
WKAudiovisualMediaTypeAll = NSUIntegerMax
} API_AVAILABLE(macosx(10.12), ios(10.0));
划重点:写完了这些之后才发现webView的完成方法不走了,我是要在webViewDidFinishLoad里处理一些事情。怎么办呢,苦思冥想终于想到一个方式(第二种)试了试,结果却是可以的(欣喜若狂)。具体原因不清楚,有知道的可以评论下。
解决方法:
1.h5 video标签设置不自动播放,然后调用播放的方法
2.h5 video标签设置不自动播放,由iOS或安卓在网页加载完成时来调用js的播放方法。
经测试2种方法都可以。
webViewDidFinishLoad方法
NSString *textJS = [NSString stringWithFormat:@"shakeVideo()"];
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
[context evaluateScript:textJS];
参考文章:
allowsinlinemediaplayback苹果官方解释
mediaTypesRequiringUserActionForPlayback苹果官方解释
网友评论