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
                }
            }
        }
    },
}