html里的video 标签放在ios上的app上播放都是全屏的,怎么阻止他的默认全屏事件,还有他不是视频,是直播
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html里的video 标签放在ios上的app上播放都是全屏的,怎么阻止他的默认全屏事件,还有他不是视频,是直播相关的知识,希望对你有一定的参考价值。
<video :width="width" controls x5-playsinline height="250" webkit-playsinline="true" playsinline="true" src=“”
poster="" id="myPlayer" autoplay >
uni-app video标签打包H5Android上支持播放.m3u8 hls直播流
默认uni-app打包出来的H5在Android上是没法播放.m3u8直播流的,控制台或报错
Uncaught (in promise) DOMException: The element has no supported sources.
可以用hls.js来解决,在App.vue的onLaunch方法中增加加下列代码即可:
// 下面的代码增加对Android H5播放m3u8支持
// #ifdef H5
if (uni.getSystemInfoSync().platform != \'ios\') {
var script = document.createElement("script");
script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
script.onload = function() {
let init = function(video) {
if (!video.getAttribute(\'hls-inited\')) {
let hls = null;
let load = function() {
let src = video.src;
if (!src || src.indexOf(\'.m3u8\') < 0)
return
if (!hls) {
hls = new Hls();
hls.attachMedia(video);
}
hls.loadSource(src);
}
video.addEventListener("error", function() {
load();
}, false);
video.addEventListener("DOMNodeRemovedFromDocument",function(){
if(hls){
hls.destroy()
}
}, false);
video.setAttribute(\'hls-inited\', \'ok\');
}
}
document.getElementsByTagName("video").forEach(init)
document.body.addEventListener("DOMNodeInserted", function(e) {
let ele = e.relatedNode;
if (ele.tagName === \'VIDEO\') {
init(ele);
}
ele.getElementsByTagName("video").forEach(init)
})
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s);
}
// #endif
以上是关于html里的video 标签放在ios上的app上播放都是全屏的,怎么阻止他的默认全屏事件,还有他不是视频,是直播的主要内容,如果未能解决你的问题,请参考以下文章
html5开发,android中的微信内置浏览器如何让video标签的视频不全屏播放
如何在 iOS 上自动播放 HTML5 <video> 和 <audio> 标签?