关于如何在微信里面让video不全屏播放

        发现一个更简单的解决方法，加上一条属性即可。x5-video-player-type=”h5″。通过设置这个属性，让video开启同层H5播放器。另外在X5内核里，video是单独的一个view，会覆盖在任何元素之上，据说是为了统一用户体验，加上这个属性之后，也可以让其他元素浮在video上面了。

经过测试，在IOS设备，依然还需要添加如下属性

 

1  x-webkit-airplay=”true” playsinline webkit-playsinline=”true”

另外还有几个属性 x5-video-player-fullscreen=”true”，视频播放时将会进入到全屏模式。

x5­video­orientation，声明播放器支持的方向，可选值： landscape 横屏, portraint竖屏 ，此属性只在声明了x5­video­player­type=”h5″情况下生效。

1 <video src="m.mp4" playsinline="true" webkit-playsinline="true" 
2 x-webkit-airplay="true" x5-video-player-type="h5" x5-video-orientation="h5" 
3 x5-video-player-fullscreen="true" preload="auto" style="object-fit:fill;">video>

preload="auto"   开启视频缓冲，页面加载完即加载视频

webkit-playsinline="true"  控制当前视频在当前设置的div里面播放，不脱离文档流

x-webkit-airplay="true"  支持Airplay的设备

x5-video-player-type="h5"  开启同层播放器，取消播放器的默认的播放按钮和播放器控制器控制面板，整个页面只保留微信默认自带的返回和关闭菜单

x5-video-player-type="h5"  x5-video-player-fullscreen="true"  同层播放器设置类型为h5和设置视频播放为全屏幕

 style="object-fit:fill;" css3样式设置填充整个屏幕

通过属性的设置和样式的控制让视频全屏显示。

 

 

请看demo

    
    
    
    
    
    
    



    
点击播放
    
    再次播放

　　更多关于关于iOS video标签限制和支持格式
　　请参考Apple文档
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1

2017-12-06 23:54:32