Video.JS使用总结

最新推荐文章于 2024-05-15 09:40:22 发布

Bear211318

最新推荐文章于 2024-05-15 09:40:22 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42433157/article/details/103181622

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.video.js是什么

Video.js是专为HTML5世界打造的网络视频播放器。它支持HTML5视频和现代流媒体格式，以及YouTube，Vimeo甚至Flash（通过插件，稍后会有更多介绍）。它支持在台式机和移动设备上播放视频。该项目于2010年年中开始，现已有数百名贡献者，并在超过450,000个网站上使用。

二.初始化方式

1 通过CDN方式引入

<head>
  <link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.5.5/video.js"></script>
</body>

2 通过npm方式引入
因为我的项目播放的rtmp流,所以需要videojs-flash支持,否则无法播放,可自行取舍.

npm install --save-dev video.js
npm install --save videojs-flash

三.使用方式

因为我的项目是使用npm来管理的,所以在这里我就只谈一下这个方式的使用.
使用npm引入video.js之后,要在main.js文件中引入

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

vue页面中使用

    <el-row :gutter="20">
      <el-col :span="6" v-for="(src,id) in srcList" :key="id">
        <div class="teststyle">
          <video :id="'myVideo'+id" class="video-js vjs-big-play-centered">
            <source :src="src" type="rtmp/flv" />
          </video>
        </div>
      </el-col>
    </el-row>

data() {
    return {
      classificationList: ["默认", "火灾", "地震", "泥石流", "滑坡"],
      srcList: [
        "rtmp://localhost:1935/live/1",
        "rtmp://localhost:1935/live/test",
        "rtmp://localhost:1935/live/test",
        "rtmp://localhost:1935/live/test",
        "rtmp://localhost:1935/live/test"
      ]
    };
  },
  beforeDestroy: function() {
    for (var i = 0; i < this.srcList.length; i++) {
      this.$video("myVideo" + i).dispose();
    }
  },
  mounted() {
    this.initVideo();
  },
  methods: {
    //初始化视频播放器
    initVideo() {
      // this.axios({
      //   method: "get",
      //   url: "live/lives"
      // }).then(res => {
      //   console.log(res);
      //   this.srcList = res.data;
      //   console.log(this.srcList);
      // });
      for (var i = 0; i < this.srcList.length; i++) {
        this.$video("myVideo" + i, {
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto"
          // src: this.srcList[i]
        });
      }
    },

这里我的rtmp地址是我本地自己搭建的流媒体服务器,大家可自行百度搭建.

效果展示
推流效果

拉流效果

四.注意点

1.在切换页面的时候要将播放器销毁,不然会一直报错,画面也会一直加载不出来

Bear211318

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Video.JS使用总结

一.video.js是什么Video.js是专为HTML5世界打造的网络视频播放器。它支持HTML5视频和现代流媒体格式，以及YouTube，Vimeo甚至Flash（通过插件，稍后会有更多介绍）。它支持在台式机和移动设备上播放视频。该项目于2010年年中开始，现已有数百名贡献者，并在超过450,000个网站上使用。二.初始化方式1 通过CDN方式引入<head>...
复制链接

扫一扫