注册

vue-video-player 播放m3u8视频流

该问题网上答案较少,翻阅github得到想要的答案,在此记录一下

首先,为了减少包体积,在组件中局部引入vue-video-player(在main.j s中引入会增加包体积)

播放m3u8需要注意两点:

  1. 需要引入videojs并绑定到window上

  2. 安装依赖videojs-contrib-hls( npm i videojs-contrib-hls)并引入

  3. sources要指定type为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>

参考

作者:我只是一个API调用工程师
来源:juejin.cn/post/7080748744592850951

0 个评论

要回复文章请先登录注册