vue 使用vue-video-player播放hls格式视频

安装 

vue-video-player   在 “

devdependencies

” 中

安装 

videojs-contrib-hls 在“

dependencies

”中

 

main.js 中引入

import hls from 'videojs-contrib-hls'
import videoplayer from 'vue-video-player';
import "video.js/dist/video-js.css"
import "vue-video-player/src/custom-theme.css"

vue.use(hls)
vue.use(videoplayer)

 

 

页面中使用 第一种方式

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto">
            <source src="http://ivi.bupt.edu.cn/hls/cctv1.m3u8" type="application/x-mpegurl" />
          </video>

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

mounted(){
    videojs(
      "my-video",
      {
        bigplaybutton: false,
        texttrackdisplay: false,
        posterimage: true,
        errordisplay: false,
        controlbar: true
      },
      function() {
        this.play();
      }
    );
}

页面中使用 第二种方式

<video-player
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="'http://ivi.bupt.edu.cn/hls/cctv1.m3u8'|videooption">
          </video-player>

import 'videojs-contrib-hls'

filters：{
videooption(val) {
      console.log('val',val)
        return {
            live: false,
            preload: "auto",
            autoplay: true,
            language: "zh-cn",
            aspectratio: "16:8",
            fluid: true,
            sources: [
                {
                    src: val //url地址
                }
            ],
            notsupportedmessage: "此视频暂无法播放，请稍后再试", //允许覆盖video.js无法播放媒体源时显示的默认信息。
            controlbar: {
                timedivider: false,
                durationdisplay: false,
                remainingtimedisplay: false,
                fullscreentoggle: true //全屏按钮
            },
            flash: {
                hls: {
                    withcredentials: false
                }
            }
        }
    },
}