在百度中找啦n多個(gè)方法 沒有解決啦 巨氣人
發(fā)現(xiàn)hls.js hls.js不需要任何播放器,它可以直接在標(biāo)準(zhǔn)HTML 元素上運(yùn)行。
安裝第三方庫
npm install hls.js -S
在uniapp頁面顯示
<template>
<div class="video_con">
<video controls class="video" ref="video"></video>
</div>
</template>
<script>
let Hls = require('hls.js');
export default {
data() {
return {
hls: null
}
},
mounted() {
this.getStream('url')
},
methods: {
getStream(source) {
if (Hls.isSupported()) {
this.hls = new Hls();
this.hls.loadSource(source);
this.hls.attachMedia(this.$refs.video);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
console.log("加載成功");
this.$refs.video.play();
});
this.hls.on(Hls.Events.ERROR, (event, data) => {
// console.log(event, data);
// 監(jiān)聽出錯(cuò)事件
console.log("加載失敗");
});
} else if (this.$refs.video.canPlayType('application/vnd.apple.mpegurl')) {
this.$refs.video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
this.$refs.video.addEventListener('loadedmetadata',function() {
this.$refs.video.play();
});
}
},
// 停止流
videoPause() {
if (this.hls) {
this.$refs.video.pause();
this.hls.destroy();
this.hls = null;
}
}
}
}
</script>
如果想要應(yīng)用在自己的頁面中 直接c v 就ok啦
要是有人問推流為啥沒有 文章來源:http://www.zghlxwxcb.cn/news/detail-523385.html
不要問 問就是不會(huì)?。。?span toymoban-style="hidden">文章來源地址http://www.zghlxwxcb.cn/news/detail-523385.html
到了這里,關(guān)于uniapp 直播拉流 播放m3u8 視頻的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!