vue中video.js的使用_vue使用video.js

安装及使用

video.js官网地址

1. npm安装

npm install video.js --save // 视频播放器插件
npm install videojs-contrib-hls  --save // 播放hls流插件 需要时安装
1
2

2. 引入样式文件

// 可以在main.js文件中引入，也可以在页面单独引入
import 'video.js/dist/video-js.css'  //videojs样式
1
2

3. 引入插件

// 在页面引入video.js插件
import videojs from "video.js"
1
2

4. 使用

<template>
	<video 
	   id="videobox" 
	   class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"  // video-js类必须要加
	   preload="auto"  // 是否预加载
	   width="100%"  // 宽度
	   ref="videoRef"  
	   autoplay="false"  // 自动播放
	   :poster="poster" // 封面图
	>
	   <source :src="src" /> // 视频
1
2
3
4
5
6
7
8
9
10