Vue项目播放m3u8格式视频

最新推荐文章于 2025-09-10 15:47:46 发布

原创最新推荐文章于 2025-09-10 15:47:46 发布 · 2.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

25 篇文章

订阅专栏

这篇博客介绍了如何在项目中安装并使用video.js及videojs-contrib-hls库来播放HLS视频。首先，通过npm安装了video.js和videojs-contrib-hls依赖。接着，在main.js中引入了所需的样式和JS文件，并配置了视频的基本属性如自动播放、控件显示等。然后，在HTML中创建了一个video标签，并应用了video-js的默认皮肤。最后，展示了如何设置视频源并播放HLS流。

1.安装依赖

npm install --save video.js;
npm install --save videojs-contrib-hls;

2.在main.js引入全局样式和js文件，或者在需要使用的单页面按需引入

import 'video.js/dist/video-js.css'
import videojs from 'video.js';
import 'videojs-contrib-hls'

3.页面里面使用

注意：一定要加 class=“video-js vjs-default-skin”，要不然样式会非常难看

<video id="singleVideo" preload="none" class="video-js vjs-default-skin" ></video>

	//使用
          let singlePlayer = videojs("singleVideo", {
            autoplay: true,//自动播放
            controls: true,//控件显示
            width: "440",//视频框宽度
            height: "264",//视频框高度
          });
          let res ="http://61.175.121.73:83/pag/10.13.7.2/7302/33052182001320012936/0/MAIN/TCP/live.m3u8";
          if (res) {
            singlePlayer.src({ src: res, type: "application/x-mpegURL" });
            singlePlayer.play();
          }