vue项目中引入video.js视频播放器

最新推荐文章于 2024-08-08 08:27:10 发布

前端一枚

最新推荐文章于 2024-08-08 08:27:10 发布

阅读量897

点赞数

分类专栏： vue 文章标签： video.js

原文链接：https://blog.csdn.net/weixin_43503080/article/details/105991793

版权

vue 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

vue项目中引入video.js视频播放器
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

安装： npm install video.js
在main.js中引入video.js

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

在某个.vue页面使用

<template>
  <div>
    <div class="test_two_box">
      <video id="myVideo" class="video-js">
        <source src="http://192.168.234.116:8110/Video/小白菜.mp4" type="video/mp4" />
      </video>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    let myPlayer = this.$video(myVideo, {
      //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      controls: true,
      poster: 'http://192.168.234.116:8110//Picture/position/banner.jpg', //封面
      //自动播放属性,muted:静音播放
      // autoplay: "muted",
      //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      preload: "auto",
      //设置视频播放器的显示宽度（以像素为单位）
      width: "300px",
      //设置视频播放器的显示高度（以像素为单位）
      height: "180px"
    });
  }, 
}

注：项目实际应用如下：

<template>
  <div>
      ... 
      <div class="test_two_box">
        <video id="myVideo" class="video-js">
          <source :src="videoUrl" type="video/mp4" />
        </video>
      </div>
      ...
    </div>
  </div>
</template>

<script>
import { GetVideoFile } from '@/apis/apis'
export default {
  data() {
    return {
      videoUrl: '',
    }
  },
  created() {
    this.GetVideo();
  },
  mounted() {
    // let myPlayer = this.$video(myVideo, {
    //   //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
    //   controls: true,
    //   poster: this.baseUrl + '/Picture/position/banner.jpg',
    //   //自动播放属性,muted:静音播放
    //   // autoplay: "muted",
    //   //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
    //   preload: "auto",
    //   //设置视频播放器的显示宽度（以像素为单位）
    //   width: "300px",
    //   //设置视频播放器的显示高度（以像素为单位）
    //   height: "180px"
    // });
  },
  methods: {
    GetVideo() {
      GetVideoFile().then(res => {
        this.videoUrl = res.CountyUrl
        this.$nextTick(() => {
          let myPlayer = this.$video(myVideo, {
            controls: true,
            poster:res.CountyCoverUrl,//封面
            autoplay: false,
            preload: false,
            width: "350px",
            height: "180px"
          });
        })
      })
    },
  }
};
</script>