本文链接:【Vue】插件:八、结合 vue-video-player、videojs-flash、videojs-contrib-hls使用videojs播放视频
相关文档:【JS&JQuery】videojs插件使用
相关文档:【Nuxt】四、VueX使用教程
1. 安装vue-video-player
1.1. 安装vue-video-player
npm install vue-video-player --save
1.2. 安装videojs-flash
npm install videojs-flash --save
1.3. 安装videojs-contrib-hls
npm install --save videojs-contrib-hls
2. vue.config.js中添加chainWebpack支持swf
chainWebpack: config => {
config.module
.rule('swf')
.test(/\.swf$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000
});
},
3. 全局引用并使用中文语言包
在src>plugins中新建video.js文件,内容如下
3.1. video.js
import Vue from 'vue';
import VueVideoPlayer from 'vue-video-player';
import 'vue-video-player/src/custom-theme.css';
import hls from 'videojs-contrib-hls';//此处用const会报错
import Video from 'video.js';
import 'video.js/dist/video-js.css';
// import 'video.js/dist/lang/zh-CN.js';// vue中直接引用会报错
// import 'video.js/dist/lang/zh-CN.json';// 本文使用的videojs版本中dist无此文件,根据video.js/dist/lang/zh-CN.js新建了下面video-zh-CN.json文件
import zhCN from './video-zh-CN.json';
import 'videojs-flash';
import SWF_URL from 'videojs-swf/dist/video-js.swf';//此处用const会报错
Video.options.flash.swf = SWF_URL; // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件
Video.addLanguage('zh-CN', zhCN);// 添加中文支持
Vue.use(hls);
Vue.use(VueVideoPlayer);
3.2. video-zh-CN.json
{
"Play": "播放",
"Pause": "暂停",
"Current Time": "当前时间",
"Duration": "时长",
"Remaining Time": "剩余时间",
"Stream Type": "媒体流类型",
"LIVE": "直播",
"Loaded": "加载完毕",
"Progress": "进度",
"Fullscreen": "全屏",
"Non-Fullscreen": "退出全屏",
"Mute": "静音",
"Unmute": "取消静音",
"Playback Rate": "播放速度",
"Subtitles": "字幕",
"subtitles off": "关闭字幕",
"Captions": "内嵌字幕",
"captions off": "关闭内嵌字幕",
"Chapters": "节目段落",
"Close Modal Dialog": "关闭弹窗",
"Descriptions": "描述",
"descriptions off": "关闭描述",
"Audio Track": "音轨",
"You aborted the media playback": "视频播放被终止",
"A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
"No compatible source was found for this media.": "无法找到此视频兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
"Play Video": "播放视频",
"Close": "关闭",
"Modal Window": "弹窗",
"This is a modal window": "这是一个弹窗",
"This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
", opens captions settings dialog": ", 开启标题设置弹窗",
", opens subtitles settings dialog": ", 开启字幕设置弹窗",
", opens descriptions settings dialog": ", 开启描述设置弹窗",
", selected": ", 选择",
"captions settings": "字幕设定",
"Audio Player": "音频播放器",
"Video Player": "视频播放器",
"Replay": "重播",
"Progress Bar": "进度小节",
"Volume Level": "音量",
"subtitles settings": "字幕设定",
"descriptions settings": "描述设定",
"Text": "文字",
"White": "白",
"Black": "黑",
"Red": "红",
"Green": "绿",
"Blue": "蓝",
"Yellow": "黄",
"Magenta": "紫红",
"Cyan": "青",
"Background": "背景",
"Window": "视窗",
"Transparent": "透明",
"Semi-Transparent": "半透明",
"Opaque": "不透明",
"Font Size": "字体尺寸",
"Text Edge Style": "字体边缘样式",
"None": "无",
"Raised": "浮雕",
"Depressed": "压低",
"Uniform": "均匀",
"Dropshadow": "下阴影",
"Font Family": "字体库",
"Proportional Sans-Serif": "比例无细体",
"Monospace Sans-Serif": "单间隔无细体",
"Proportional Serif": "比例细体",
"Monospace Serif": "单间隔细体",
"Casual": "舒适",
"Script": "手写体",
"Small Caps": "小型大写字体",
"Reset": "重启",
"restore all settings to the default values": "恢复全部设定至预设值",
"Done": "完成",
"Caption Settings Dialog": "字幕设定视窗",
"Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
"End of dialog window.": "结束对话视窗"
}
4. 在main.js中引入video.js文件
import './plugins/video';// 引入视频播放插件
5. 单页面中使用
如果没有需求,像 @ready="playerReadied"这些子传父的方法可以不写
<video-player
class="vjs-custom-skin video-player"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname"
@ready="playerReadied"
@loadeddata="onPlayerLoadeddata($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@play="onPlayerPlay($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@pause="onPlayerPause($event)"
@waiting="onPlayerWaiting($event)"
@ended="onPlayerEnded($event)"
@statechanged="playerStateChanged($event)"
></video-player>
data() {
return {
playerOptions: {
techOrder: ['html5', 'flash'], // 兼容顺序,使用flash播放，可以播放flv格式的文件
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: true, // 如果true,浏览器准备好时开始回放
notSupportedMessage: '此视频暂无法播放!', // 无法播放时显示的信息
sourceOrder: true,
loop: false, // 导致视频一结束就重新开始。
// preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
muted: true, // 默认情况下将会消除任何音频。
language: 'zh-CN',
// aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
hls: true, //启用hls？
flash: {
hls: { withCredentials: false },
//swf: '/videojs/video-js.swf'//放在static或着public下面文件夹中的videojs文件夹中 当引入js文件中统一定义时此处可省略
},
html5: { hls: { withCredentials: false } },
sources: [
{
type: 'video/mp4', // 资源格式写法：'video/mp4'
src: '/video/1.mp4' // 本地资源地址，注意：本地资源存放在public文件夹中，本文视频资源路径public/video/1.mp4
}，
{
// withCredentials: true，
type: 'application/x-mpegURL', // hls
src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8' // url地址
}，
{
type:'rtmp/flv',//rtmp
src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'//rtmp
},
{
type: 'rtmp/flv',//rtmp
src: `rtmp://58.200.131.2:1935/livetv/hunantv`
},
{
type: 'rtmp/mp4', // 资源格式写法：'video/mp4'
src: 'rtmp://' // url地址
}
],
poster: 'path', // 你的封面地址
// width: document.documentElement.clientWidth,
height: this.fileAreaHeight, // 设置高度，fluid需要设置成flase
// 配置控制栏
controlBar: {
volumePanel: {
inline: false,//音量调节是否水平
},
timeDivider: true, // 时间分割线
currentTimeDisplay:true,//当前播放位置
durationDisplay: true, // 总时间
progressControl: true, // 进度条
remainingTimeDisplay: false, // 剩余时间
fullscreenToggle: true // 全屏按钮
}
}
};
},
注意：computed中的这段必须要加上！！！
播放需要使用到 flash 时,浏览器的flash插件要允许运行
flash打开
mounted() {
console.log('当前videojs对象', this.player);
// this.player.play() // 播放
// this.player.pause() // 暂停
// this.player.src(src) // 重置进度条
},
computed: {
player() {
return this.$refs.videoPlayer.player;
}
},
methods: {
// --------------------视频播放-开始-------------------- */
// 初始化话播放-在onPlayerCanplay中调用
initPlay(player) {
console.log('initPlay>当前视频播放器实例对象', this.player);
player.play();
},
/* 视频播放 */
// 视频准备完毕
playerReadied(player) {
console.log('Readied>视频准备完毕!', player);
},
// 视频加载完成
onPlayerLoadeddata(player) {
console.log('Loadeddata>视频加载完成!', player);
},
// 可以播放视频
onPlayerCanplay(player) {
console.log('Canplay>可以播放视频!', player);
// this.initPlay(player);
},
// 拖动视频条会触发事件-视频暂停>可以播放视频>可以播放视频至拖动位置>视频播放>视频加载中>可以播放视频>视频播放中>视频加载中>可以播放视频>视频播放中>视频加载中>可以播放视频>视频播放中>可以播放视频至拖动位置
// 可以播放视频至拖动位置
onPlayerCanplaythrough(player) {
console.log('Canplaythrough>可以播放视频至拖动位置!', player);
},
// 视频播放
onPlayerPlay(player) {
console.log('Play>视频播放!', player);
},
// 视频播放中
onPlayerPlaying(player) {
console.log('Playing>视频播放中!', player);
},
// 视频时间更新中
onPlayerTimeupdate(player) {
// console.log('Timeupdate>视频时间更新中!', player);
},
// 视频暂停
onPlayerPause(player) {
console.log('Pause>视频暂停!', player);
},
// 视频加载中
onPlayerWaiting(player) {
console.log('Waiting>视频加载中!', player);
},
// 视频状态改变
playerStateChanged(playerCurrentState) {
console.log('StateChanged>视频状态改变', playerCurrentState);
},
// 视频播放结束
onPlayerEnded(player) {
console.log('Ended>视频播放结束!', player);
}
//切换视频
playVideo(url) {
if (url) {
this.playerOptions.sources = [
{
type: 'video/mp4',
autoplay: true,
src: 'http://172.19.82.59:1234/test' // 本地资源地址，注意：本地资源存放在 static 文件夹中，本文视频资源路径 static/topicMaterial/1.mp4
}
];
} else {
this.playerOptions.sources = [];
}
},
// --------------------视频播放-结束-------------------- */
}
参考文档网址:
vue-video-player的使用总结
vue中使用video插件vue-video-player
vue-video-player语言设置
videoJs常用方法、事件、VUE中使用的注意事项
webpack与video.js一同使用的一些坑
nuxt中使用vue-video-player，以及hls实现（支持m3u8)
