html5使用 video标签内嵌显示

Android WebView

默认是内嵌显示

IOS UIWebView

默认全屏显示
内嵌显示方案：

  • object-c中设置 UIWebView 属性 allowsInlineMediaPlayback 为true
  • 在html5中添加属性 playsinline
    IOS 10.0之前的版本添加属性 webkit-playsinline
    因此，兼容处理，需同时添加这两个属性

参考：https://developer.apple.com/reference/uikit/uiwebview/1617960-allowsinlinemediaplayback

微信Android

微信Android使用的是腾讯X5内核，video标签被内核劫持，表现与默认webview完全不同， 默认全屏显示。
此前可申请将域名加入白名单，现在不能申请了；
最新的方案是同层播放： 

1
2
3
<video src="img/movie.mp4" preload="auto" id="video" 
    webkit-playsinline="webkit-playsinline" playsinline="playsinline" 
    x5-video-player-type="h5" poster="img/poster.png">

x5-video-player-type="h5"为微信特有属性。表明该视频用同层播放。
同层播放不能控制层级，在最上层，并且全屏，如果视频不是全屏，其他部分则显示黑色。
实际上也不是内嵌。
就是无法做到内嵌显示

微信IOS

微信有处理UIWebView
添加属性 webkit-playsinline playsinline 就行

问题

微信Android下，播放一次视频后，再使用其他视频以同样的名字替换之前的视频，再次播放会出现视频解码错误，
应是由于视频被缓存了部分
需将视频重命名，或者在视频名称后面加后缀来重新获取新的视频

本文地址： http://gehaiqing.com/2017/02/15/html-video-playinline/