欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-10-27 09:10:34
安装 vue-video-player 在 “ devDependencies ” 中 devDependencies 安装 videojs-contrib-hls 在“ dependencies ”中 main.js 中引入 import hls from 'videojs-contrib-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
                }
            }
        }
    },
}