引入video.js并使用

最新推荐文章于 2025-05-06 16:36:51 发布

秋风入山城

最新推荐文章于 2025-05-06 16:36:51 发布

阅读量1.3k

点赞数

分类专栏： video.js vue js 文章标签： javascript

本文链接：https://blog.csdn.net/liusen_445566/article/details/120641694

版权

video.js 同时被 3 个专栏收录

1 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

1 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中安装和配置video.js、vue-video-player、videojs-contrib-hls和videojs-flash库，以实现HLS视频流的播放。通过引入相关组件和样式，设置视频配置，包括播放源、自动播放、控制条等选项，并在HTML结构中使用v-for循环展示多个视频源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装video.js
"videojs-contrib-hls": "5.14.1",
"videojs-contrib-hls.js": "3.2.0",
"videojs-flash": "2.1.0",
"vue-video-player": "4.0.6"
"video.js": "^7.12.3",

引入video.js
/* 视频监控插件 */
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'
import 'videojs-contrib-hls/dist/videojs-contrib-hls'
Vue.use(VueVideoPlayer)

html

 <ul>
     <li class="carousel-item" v-for="(item, index) in videoConfig" :key="index">
        <video-player
          class="vjs-custom-skin videosa"
          :options="item"
        ></video-player>
      </li>
 </ul>

js

data() {
    return {
        list:[//视频源
          'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
          'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8',
          'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
          'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8',
        ],
        videoConfig:[],//视频配置信息
    };
  },
methods: {
getVideoList() {
      for (let i in this.list) {
        this.videoConfig.push({
          // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: true, //自动播放。
          controls: true, //控制条
          preload: "auto", //视频预加载
          muted: false, //默认情况下将会消除任何音频。
          loop: false, //导致视频一结束就重新开始。
          language: "zh-CN",
          aspectRatio: "16:9", // 视频比例（例如"16:9"或"4:3"）
          fluid: true, //窗体自适应
          sources: [
            {
              type: "application/x-mpegURL",
              src: this.list[i]
            }
          ],
          // poster:"", //视频封面
          // width: document.documentElement.clientWidth,
          notSupportedMessage: "此视频暂无法播放，请稍后再试"
        });
      }
    },
},
mounted(){
  this.getVideoList();
},