将video的视频链接转为blob
export const encryptionVideo = (options: URL) => {return new Promise((resolve, reject) => {window.URL = window.URL || window.webkitURL;var xhr = new XMLHttpRequest();xhr.open('GET', options.url, true);xhr.responseType = 'blob';xhr.onload = function() {if (this.status == 200) {var blob = this.response;var u = window.URL.createObjectURL(blob);resolve(u);}};xhr.send();});
}
注:如果出现跨域问题需要在服务器上设置一下不让跨域
视频标签中设置相应属性
<videoid="video" src="video.mp4" controls = "true"poster="images.jpg" /*视频封面*/preload="auto" webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/ playsinline="true" /*IOS微信浏览器支持小窗内播放*/ x-webkit-airplay="allow" x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/x5-video-player-fullscreen="true" /*全屏设置,设置为 true 是防止横屏*/x5-video-orientation="portraint" //播放器支付的方向, landscape横屏,portraint竖屏,默认值为竖屏style="object-fit:fill">
</video>
更多信息:https://zhuanlan.zhihu.com/p/166014722?utm_id=0