关于 voide 播放 m3u8格式视频

最新推荐文章于 2023-03-27 16:59:13 发布

原创最新推荐文章于 2023-03-27 16:59:13 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue.js项目中使用Video.js播放HLS视频流，包括安装必要的npm包、配置视频源及类型、初始化播放器等步骤。

vuecli 中先安装

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

然后再 main中引入

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

在 vue.js中使用处

import vs from 'video.js'
import 'videojs-contrib-hls'

<video id="video" class="video-js vjs-default-skin" controls preload="auto">
	<source
	   src="视频地址"
	   type="application/x-mpegURL"// 播放格式
	/>
</video>

mounted() {
  videojs("video",
      function() {
      this.play();
  });
},
beforeDestroy () {
  this.dispose()
}

还用另外两种方法
mounted 写个变量

<template>
  <div class="videoplayback">
    <video id="video" class="video-js vjs-default-skin" controls preload="auto">
      <source
        :src="videoUrls"
        :type="sourceType"
      />
    </video>
  </div>
</template>

<script>
import videoes from 'video.js'
import 'videojs-contrib-hls'
export default {
  name: "videoplayback",
  data() {
    return {
			// 用于存储连接
      videoUrls:'https://videos8.jsyunbf.com/20190717/s6DaVnKb/index.m3u8',
      sourceType: '',
      player:'',
      videoType: {
        ogg: "video/ogg",
        mp4: "video/mp4",
        webm: "video/webm",
        m3u8: "application/x-mpegURL"
      }
		};
  },
  props: {
		// 用于接受连接 
		videoBFUrl:String
	},
  methods: {
    videoPlay () {
      this.player.play()
    },
    videoPause () {
      // console.log(this.player);
      this.player.pause()
    }
  },
  created() {
    // console.log(this.videoBFUrl);
		// 判断 传过来的数据是否有值 有用传过来的数据 无 用默认连接
    this.videoUrls = (this.videoBFUrl == undefined ? this.videoUrls : this.videoBFUrl)
    // console.log(this.videoUrls);
    if(this.videoUrls.indexOf(".mp4") !=-1){
      this.sourceType = this.videoType.mp4
      // console.log(this.videoType.mp4);
    }
    if(this.videoUrls.indexOf(".ogg") !=-1){
      this.sourceType = this.videoType.ogg
      // console.log(this.videoType.ogg);
    }
    if(this.videoUrls.indexOf(".webm") !=-1){
      this.sourceType = this.videoType.webm
      // console.log(this.videoType.webm);
    }
    if(this.videoUrls.indexOf(".m3u8") !=-1){
      this.sourceType = this.videoType.m3u8
      // console.log(this.videoType.m3u8);
    }
	},
  mounted() {
    this.player=videoes("video")
    // videoPlay("video", function() {
    //   this.play();
    //   // this.pause() 暂停
    //   // this.dispose() 销毁
    // });
  },
  beforeDestroy () {
    this.player.dispose()
  }
};
</script>

<style scoped lang="stylus">
  .videoplayback
    width 10rem
    #video
      width 100%
      height 5.853rem
  .video-js
    .vjs-big-play-button
      position: absolute !important
      top: 2.0rem !important
      left: 36% !important
</style>