标签：vue vedio m3u8 js video https id Videojs

1安装

yarn add video.js

yarn add videojs-contrib-hls // 这是播放hls流需要的插件

yarn add mux.js // 在vue项目中，若不安装它可能报错

2 vue中 main.js中引入

//video js
import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
Vue.use(hls);

3  实现播放m3u8格式的视频 

单个视频

<template>
  <div class="test-videojs">
    <video
      :id="postId"
      class="video-js"
      controls
      preload="none"
      poster="http://vjs.zencdn.net/v/oceans.png"
      :options="options"
    >
      <source :src="this.nowPlayVideoUrl" type="application/x-mpegURL" />
    </video>
  </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs
export default {
  data() {
    return {
      postId: null,
      nowPlayVideoUrl:
        "https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",
      options: {
        autoplay: false, // 设置自动播放
        controls: true, // 显示播放的控件
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initVideo(this.now);
    });
  },
  created() {
    this.postId = "video" + new Date().getTime().toString().substr(8);
  },
  methods: {
    initVideo() {
      let myPlyer = Videojs(
        this.postId,
        this.options,
        function onPlayerReady() {
          console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
          console.log(myPlyer === this); // 这里返回的是true
        }
      );
    },
  },
};
</script>
<style lang="scss">
.video-js {
  width: 200px;
  height: 100px;
  .vjs-big-play-button {
    top: 0;
    left: 0;
    transform: translate(50%, 50%);
  }
}
</style>

 多个视频

<template>
  <div class="test-videojs">
    <!-- <video id="videoPlayer" class="video-js" muted></video> -->
    <div v-for="(item,index) in audios" :key="index">
      {{item.id}}
       <video :id="'videoPlayer'+item.id" class="video-js" controls preload="none" 
         poster="http://vjs.zencdn.net/v/oceans.png"
         :options="options"
         >
     <source :src="item.now" type="application/x-mpegURL">
  </video>
    </div>
    
  </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs 
export default {
  data() {
    return {
    //  https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 是一段视频，可将cctv1 （是live现场直播，不能快退）的替换为它，看到快进快退的效果
      nowPlayVideoUrl: "https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",
      audios:[
        {   now:"https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",id:1},
        {   now:"https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",id:2},
        {   now:"https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",id:3},
        {   now:"https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",id:4},
      ],
      options:{
        autoplay: false, // 设置自动播放
        controls: true, // 显示播放的控件
      }
    };
  },
  mounted() {
       this.$nextTick(() => {
      this.initVideo(this.now);
    });
  },
  methods: {
    initVideo() {
      // videojs的第一个参数表示的是，文档中video的id
    this.audios.forEach((item,index)=>{
       let myPlyer = Videojs("videoPlayer"+item.id, this.options, function onPlayerReady() {
        console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
        console.log(myPlyer === this); // 这里返回的是true
      });
    }) 
    }
  }
};
</script>
<style lang="scss">
#videoPlayer {
  width: 100px;
  height: 100px;
  margin: 50px auto;
}
</style>

标签：vue,vedio,m3u8,js,video,https,id,Videojs
来源： https://www.cnblogs.com/lvlisn/p/14804150.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。