在开发期间使用过video.js、mui-player等插件，发现这些video插件对移动端的兼容性都不友好，最后发现一个在移动端兼容不错的插件vue-video-player，下面通过场景分析给大家介绍使用vue-video-player实现直播的方法，感兴趣的朋友一起看看吧
摘要：在H5页面实现观看直播+视频回放；在开发期间使用过video.js、mui-player等插件，发现这些video插件对移动端的兼容性都不友好，最后发现一个在移动端兼容不错的插件——vue-video-player
场景：
移动端H5页面，项目是vue搭建的，使用的是HLS协议以m3u8结尾的直播流
一、安装vue-video-player
播放HLS视频流需要安装 videojs-contrib-hls插件，播放RTMP视频流则安装 videojs-flash插件，hls插件与flash插件同时使用时flash插件需要在hls插件之前引入；（资料上讲安装vue-video-player时会自动安装hls插件，实际操作中并没有，还是自己手动安装吧！）
安装方式1:
CDN方式，直接在html文件头部引入文件: <link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/> <script type="text/javascript" src="path/to/video.min.js"></script> <script type="text/javascript" src="path/to/vue.min.js"></script> <script type="text/javascript" src="path/to/dist/vue-video-player.js"> </script> <script type="text/javascript"> Vue.use(window.VueVideoPlayer) </script> |
安装方式2:
NMP安装插件: npm install vue-video-player --save npm install videojs-contrib-hls --save main.js中引入基础样式文件: // 引入videoPlayer样式 import 'video.js/dist/video-js.css'
按需引入： import 'videojs-contrib-hls' import { videoPlayer } from 'vue-video-player' components: { videoPlayer },
全局引入: import Vue from 'vue' import VueVideoPlayer from 'vue-video-player' // 自定义样式引入，在<video-player>添加对应类名，例如video-player-custom // import 'vue-video-player/src/custom-theme.css' Vue.use(VueVideoPlayer, /* { options: 全局默认配置, events: 全局videojs事件 }*/) |
二、使用 vue-video-player
<template>
<!-- playsinline：设置播放器在移动设备上不全屏[ Boolean, default: false ] -->
<!-- customEventName：自定义状态变更时的事件名[ String, default: 'statechanged' ] -->
<video-player
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname"
@play="onPlayerPlay"
@pause="onPlayerPause"
@ended="onPlayerEnded"
@ready="playerReadied"
@statechanged="playerStateChanged"
@playing="onPlayerPlaying"
@waiting="onPlayerWaiting"
@loadeddata="onPlayerLoadeddata"
@timeupdate="timeupdate"
@canplay="onPlayerCanplay"
@canplaythrough="onPlayerCanplaythrough">
</video-player>
</template>
<script>
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
},
data() {
return {
playerOptions: {
// 是否静音
muted: true,
// 默认为英语，设置为中文
language: 'zh-CN',
// 播放速度，指定后Video.js将显示一个控件(vjs-playback-rate类的控件)，允许用户选择播放速度
playbackRates: [0.5, 1.0, 1.5, 2.0],
// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，表示长宽比例
aspectRatio: '4:3',
// 兼容顺序，默认值是['html5']，其他已注册的技术将按其注册的顺序在该技术之后添加。
techOrder: ['html5'],
// 等同于原生<video>标签中的一组<source>子标签，可实现优雅降级；type 属性规定媒体资源的 MIME 类型
sources: [
//{
//type: "video/mp4",
//src: ""
//},
//{
//type: "rtmp/flv",
//src: ""
//},
{
type: "application/x-mpegURL",
src: "https://live.cgtn.com/1000/prog_index.m3u8"
},
],
// 视频封面
poster: require('./icon/cover.jpg'),
}
}
},
computed: {
//插件节点 用于添加自定义按钮事件
player() {
return this.$refs.videoPlayer.player
}
},
mounted() {},
methods: {
// 播放回调
onPlayerPlay(player) {
},
// 暂停回调
onPlayerPause(player) {
//console.log(player)
},
// 视频播放结束回调
onPlayerEnded(player) {
//console.log(player)
},
// DOM元素上的readyState更改导致播放停止
onPlayerWaiting(player) {
//console.log(player)
},
// 已开始播放回调
onPlayerPlaying(player) {
//console.log(player)
},
// 当播放器在当前播放位置下载数据时触发
onPlayerLoadeddata($event) {
//console.log($event)
},
// 当前播放位置发生变化时触发。
onPlayerTimeupdate($event) {
//console.log($event)
},
//媒体的readyState为HAVE_FUTURE_DATA或更高
onPlayerCanplay($event) {
//console.log($event)
},
//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
onPlayerCanplaythrough($event) {
//console.log($event)
},
//播放状态改变回调
playerStateChanged($event) {
//console.log($event)
},
//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
playerReadied($event) {
//console.log($event)
},
}
}
</script>
<style scoped>
.video-player-custom{
width: 100%;
height: 180px;
// vidoeUI重写
/deep/ .video-js{
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
// 播放器
.vjs-tech{
object-fit: cover;
}
// 播放按钮
.vjs-big-play-button {
position: absolute;
top: 50%;
left: 50%;
width: 2em;
height: 2em;
margin-top: -1em;
margin-left: -1em;
font-size: 2em;
line-height: 2em;
border-radius: 50%;
background-color: rgba(0,0,0,0.45);
outline: none;
}
// 封面
.vjs-poster{
width: 100%;
height: 100%;
background-size: cover;
}
}
}
</style>
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。