实现播放m3u8视频流

li@h

于 2024-01-05 09:54:25 发布

阅读量2.2k

点赞数 9

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_49066399/article/details/135401761

版权

实现m3u8视频流,网上查了很多用video-player插件可以实现，我开始也用的这个插件，但是没能实现，提示我要安装flash插件，但是安装后，也不能使用，在网上找了一下其实是不需要安装flash插件。反正试了我用不了，所以换了video(这里仅代表自己用不了video-player插件)

首先先安装
这里需要播放m3u8视频流，需要安装videojs-contrib-hls

npm install   video.js
npm install videojs-contrib-hls@5.15.0 -save

然后，我们需要引入videojs的css文件，例如在main.js中引入

import 'video.js/dist/video-js.css'

在需要播放视频的文件中引入 video.js和videojs-contrib-hls

import videojs from "video.js";
import "videojs-contrib-hls";

vue的使用

 <div style="width: 100%; height: 100%">
      <video  id="my-video"     class="video-js vjs-default-skin"  controls preload="auto">
           <source    src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
                type="application/x-mpegURL"/>
      </video>
  </div>

js的使用

  mounted() {
    let _that = this;
    setTimeout(() => {
      _that.getVideo();
    }, 6000);
  },
  beforeDestroy() {},
  methods: {
    getVideo() {
      videojs( "my-video",{  bigPlayButton: false, textTrackDisplay: false,
        posterImage: true, errorDisplay: false,controlBar: true},
        function () {
          this.play();
        }
      );
    },
}