网站首页 > 技术文章 正文
点击关注我!一起学前端!
前言:
自从flash停用后,好多项目的视频直播功能就瘫痪了,以前我们用的是Rtmp的流地址,必须采用flash插件才能播放,换了hls流地址,视频也能播放,但是只能播放单个的流,相对于四屏、六屏、九屏、多屏一起进行流地址播放,就有点鸡肋了,就不能播放出来了。
阅读本文章,你就可以实现多屏快速加载播放,而且可以解决困惑良久的问题——怎么停止hls格式流地址的请求?
实现方式
①安装vue-video-player
npm install vue-video-player --save
②在main.js引入vue-video-player
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);
③增加hls.js支持,安装videojs-contrib-hls.js
npm install videojs-contrib-hls.js -s
④在组件内引用
//引入hls.js
import 'videojs-contrib-hls.js/src/videojs.hlsjs'
⑤组件<template>添加代码
<template>
<video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
</template>
⑥<script>添加代码
export default {
data() {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: true, //如果true,浏览器准备好时开始回放。
controls: true, //控制条
preload: 'auto', //视频预加载
muted: false, //默认情况下将会消除任何音频。
loop: false, //导致视频一结束就重新开始。
language: 'zh-CN',
aspectRatio: '4:3', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [{
type: 'application/x-mpegURL', //注意一定要写成这样
src: ''
}],
poster: "xxx", //你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放,请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
},
sourceSrc:[]
};
},
⑦for循环向this.playerOptions['sources'][0]['src']赋值,例如:
for(var i=0; i<data.data.length; i++){
this.playerOptions['sources'][0]['src'] = data.data.url
}
回调函数
组件示例:
<template>
<div>
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@ready="playerReadied"
>
</video-player>
</div>
</template>
函数示例:
<script>
export default {
methods: {
// 播放回调
onPlayerPlay(player) {
console.log('player play!', player)
},
// 暂停回调
onPlayerPause(player) {
console.log('player pause!', player)
},
// 视频播完回调
onPlayerEnded($event) {
console.log(player)
},
// DOM元素上的readyState更改导致播放停止
onPlayerWaiting($event) {
console.log(player)
},
// 已开始播放回调
onPlayerPlaying($event) {
console.log(player)
},
// 当播放器在当前播放位置下载数据时触发
onPlayerLoadeddata($event) {
console.log(player)
},
// 当前播放位置发生变化时触发。
onPlayerTimeupdate($event) {
console.log(player)
},
//媒体的readyState为HAVE_FUTURE_DATA或更高
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
onPlayerCanplaythrough(player) {
// console.log('player Canplaythrough!', player)
},
//播放状态改变回调
playerStateChanged(playerCurrentState) {
console.log('player current update state', playerCurrentState)
},
//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于,如果ready事件已经发生,它将立即触发该函数。。
playerReadied(player) {
console.log('example player 1 readied', player);
}
},
}
</script>
坑点:
1、必须安装hls.js依赖包
2、流地址的赋值(this.playerOptions['sources'][0]['src'] = '流地址')
3、video-player标签的class必须设置成“video-player vjs-custom-skin”,你引入的样式才能起作用。
4、css文件的引入方式:如果在组件中引入,import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css'不起作用,必须在全局中这样引入require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css')
这样一来,基本上就没啥问题了。来看看效果:
感谢您的阅读!关注我,持续更新前端干货!
猜你喜欢
- 2024-11-26 视频播放必备神器,解锁H5 Player的强大功能
- 2024-11-26 NAS下搭建具备web管理界面并自动上传视频的bilibili录播姬
- 2024-11-26 html5的面试中,大概率会问到的音频和视频的那些知识点
- 2024-11-26 老司机福利,迅雷X新版可以下载网页视频了
- 2024-11-26 随笔:前端音视频的那些名词
- 2024-11-26 基于flutter/dart仿抖音app实例
- 2024-11-26 今年找工作到底有多难,真的不好找工作吗 @抖音短视频
- 2024-11-26 基于flutter3.x跨端仿抖音app实战|flutter-douyin短视频直播
- 2024-11-26 Sketch 免费入门视频教程 - 设计/前端/产品都应该学的设计利器
- 2024-11-26 MiroTalk:基于 WebRTC 的免费 4K 实时视频会议框架
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)