使用vue-video-player实现直播的方式
程序员文章站
2022-06-10 12:59:55
目录一、安装vue-video-player二、使用 vue-video-player课前准备:直播流协议https://www.cnblogs.com/yangchin9/p/14930874.ht...
课前准备:直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html
摘要:在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 class="video-player-custom" 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 lang="scss" 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>
到此这篇关于使用vue-video-player实现直播的文章就介绍到这了,更多相关vue-video-player直播内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
推荐阅读
-
MyBatis之自查询使用递归实现 N级联动效果(两种实现方式)
-
android使用Messenger绑定Service的多种实现方法
-
使用Python实现将list中的每一项的首字母大写
-
使用Flask-Cache缓存实现给Flask提速的方法详解
-
C#使用委托实现的快速排序算法实例
-
C#中通过使用Connection类来实现打开/关闭数据库的代码实例
-
Android中使用Handler及Countdowntimer实现包含倒计时的闪屏页面
-
Android实现图片的高斯模糊(两种方式)
-
vue cli使用融云实现聊天功能的实例代码
-
Python单元测试_使用装饰器实现测试跳过和预期故障的方法