vue-video-player播放m3u8格式的视频

最新推荐文章于 2024-07-26 15:57:56 发布

麻辣_水煮鱼

最新推荐文章于 2024-07-26 15:57:56 发布

阅读量7.2k

点赞数 4

分类专栏： vue 每日一记文章标签： vue播放m3u8格式的视频 video m3u8

本文链接：https://blog.csdn.net/weixin_42217154/article/details/113968264

版权

本文介绍了如何在Vue项目中利用vue-video-player组件播放m3u8格式的视频。需要先安装vue-video-player和videojs-contrib-hls，然后在组件内引入并实现自定义播放控制。提供了播放m3u8视频源的示例。

摘要由CSDN通过智能技术生成

一、vue-video-player的使用：

1.安装

npm i vue-video-player -D

2.引入（组件内引入）

import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  name: "sstc",
  components: {
    videoPlayer
  },

3.使用

<video-player class="video-player vjs-custom-skin" 
            ref="videoPlayer" 
            :playsinline="true" 
            :options="playerOptions">
          </video-player>

 playerOptions: {
        // playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        controls: false, //是否显示控制条
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。