在vue中的使用

时间：2025-01-20 13:01:42

和

  • 和 直播播放flv视频

和 直播播放flv视频

H5 的video标签并不支持flv格式的视频，毕竟flash马上就要废弃了，记录使用和的坑

官网文档： /
videojs最新版本已经将核心库和辅助库已经剥离开来, 低版本包含flash插件，比较新的版本我们要播放rtmp流和hls流需要另外安装它的两个插件videojs-flash和videojs-contrib-hls

我的使用背景： 用vue-cli 搭的脚手架，vue项目

  1. 安装
npm install video.js -S
  • 1
  1. 安装两个插件videojs-flash和videojs-contrib-hls
npm install videojs-flash videojs-contrib-hls -S
  • 1
  1. Vue工程中的主入口进行引入
// src/ => 主入口文件

import Vue from 'vue';
...

// 引入videojs
import Video from '';
import '/dist/';
Vue.prototype.$video = video; // 在原型上注册
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  1. 同样我们需要在主入口文件中引入
// src/ => 主入口文件

import Vue from 'vue';
...

// 引入videojs
import Video from '';
import '/dist/';
Vue.prototype.$video = video; 
import 'videojs-flash'; // 要播放rtmp流, 必须引入
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  1. 现在就可以在项目中使用了
    可以在js中注册使用的容器，也可以在html模板中定义。
    html模板中定义
<div class="content">
     <video id='video_1'  class="video-js vjs-default-skin vjs-big-play-centered"/>
</div>
  • 1
  • 2
  • 3

这里面可以添加你需要的设置选项，比如控件、是否自动播放以及是否静音等。
js中定义,这里用了jQuery和ES6的模板字符串

$('.content').append(`<video id='video_1'  class="video-js vjs-default-skin vjs-big-play-centered"/>`)
  • 1

一般在js中定义比较方便：

$('.content').append(`<video id='video_1'  class="video-js vjs-default-skin vjs-big-play-centered"/>`)
let myvideo = this.$video(document.querySelector('#video_1'), {
	autoplay: true, // 是否自动播放
    controls: true, // 是否显示控件
    muted: true, // 是否静音
    fill: true // 是否适应容器进行缩放
    })
myvideo.src({
	src: this.nowPlayVideoUrl,
    type: 'rtmp/flv'
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

这里一定注意，创建新的（比如更换地址）之前先销毁之前的，不然会控制台一直会报TypeError: this.el_.vjs_getProperty is not a function错误， 而且这个错误是累加的。
创建新的销毁旧的

let oldvideo = $this.$video(document.querySelector('#video_1')) // 找到之前容器内的video
oldvideo.dispose() // 销毁
// 销毁后容器也一并销毁了，所以新建前再次初始化容器
$('.content').append(`<video id='video_1'  class="video-js vjs-default-skin vjs-big-play-centered"/>`)
let myvideo = this.$video(document.querySelector('#video_1'), {
	autoplay: true, // 是否自动播放
    controls: true, // 是否显示控件
    muted: true, // 是否静音
    fill: true // 是否适应容器进行缩放
    })
myvideo.src({
	src: this.nowPlayVideoUrl,
    type: 'rtmp/flv'
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

最后beforeDestroy中销毁最后的

beforeDestroy () {
this.myvideo.dispose()
  • 1
  • 2

是哔哩哔哩一个员工写的，具体介绍见网址：/bilibili/

  1. 安装
npm install --save flv.js
  • 1
  1. 主入口文件中引入
import flv from ''
  • 1

依然可以在HTML或js中初始化，这里采用html中初始化容器,不再累述

let myvideo = flv.createPlayer({
        type: 'flv/mp4',
        url: url,
        isLive: true
      })
let videodocument = document.querySelector('#video_1')
myvideo.attachMediaElement(videodocument)
myvideo.load()
myvideo.play()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

很多个性参数可以参考 GitHub
记得销毁

beforeDestroy () {
	this.myvideo.destroy()
  },
  • 1
  • 2
  • 3

相关文章