该问题网上答案较少,翻阅GitHub得到想要的答案,在此记录一下 首先,为了减少包体积,在组件中局部引入Vue-video-player(在main.j s中引入会增加包体积) 播放
该问题网上答案较少,翻阅GitHub得到想要的答案,在此记录一下
首先,为了减少包体积,在组件中局部引入Vue-video-player
(在main.j s中引入会增加包体积)
播放m3u8需要注意两点:
npm i videojs-contrib-hls
)并引入application/x-mpegURL
代码如下:
<template>
<section>
<video-player :options="options"></video-player>
</section>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
import videojs from 'video.js'
//注意点1:需要引入videojs并绑定到window上
window.videojs = videojs
//注意点2:引入依赖
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
require('video.js/dist/video-js.CSS')
require('vue-video-player/src/custom-theme.css')
export default {
name: 'test-video-player',
components: {
videoPlayer
},
data() {
return {
options: {
autoplay: false,
height: '720',
playbackRates: [0.7, 1.0, 1.25, 1.5, 2.0],
sources: [
{
withCredentials: false,
type: 'application/x-mpegURL', //注意点3:这里的type需要指定为 'application/x-mpegURL'
src:
'https://tx-safety-video.acfun.cn/mediacloud/acfun/acfun_video/47252fc26243b079-e992c6c3928c6be2dcb2426c2743ceca-hls_720p_2.m3u8?pkey=ABDuFNTOUnsfYOEZC286rORZhpfh5uaNeFhzffUnwTFoS8-3NBSQEvWcqdKGtIRMgiywklkZvPdU-2avzKUT-I738UJX6urdwxy_ZHp617win7G6ga30Lfvfp2AyAVoUMjhVkiCnKeObrMEPVn4x749wFaigz-mPaWPGAf5uVvR0kbkVIw6x-HZTlgyY6tj-eE_rVnxHvB1XJ01_JhXMVWh70zlJ89EL2wsdPfhrgeLCWQ&safety_id=AAKir561j0mZgTqDfijAYjR6'
}
],
hls: true
}
}
},
computed: {},
methods: {},
created() {}
}
</script>
<style lang="" scoped></style>
到此这篇关于vue-video-player 播放m3u8视频流的实现的文章就介绍到这了,更多相关vue-video-player 播放m3u8视频流内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue-video-player 播放m3u8视频流的实现
本文链接: https://www.lsjlt.com/news/147188.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0