将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();
});
}
注:如果出现跨域问题需要在服务器上设置一下不让跨域
视频标签中设置相应属性
<video
id="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