网站开发html文件规范,asp是网站开发吗,高端网站建设公司联系电话,怎样优化网络1.简介
Vue Video Player 是一个基于Vue.js 的视频播放器库#xff0c;官方API Video.js API docs
m3u8是UTF-8编码格式。M3U8是指UTF-8编码的M3U文件#xff0c;而M3U文件是记录了一个索引纯文本文件#xff0c;打开它时播放软件并不是播放它#xff0c;而是根据它的索引…1.简介
Vue Video Player 是一个基于Vue.js 的视频播放器库官方API Video.js API docs
m3u8是UTF-8编码格式。M3U8是指UTF-8编码的M3U文件而M3U文件是记录了一个索引纯文本文件打开它时播放软件并不是播放它而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。M3U8是一种常见的流媒体格式主要以文件列表的形式存在既支持直播又支持点播尤其在Android、iOS等平台最为常用。 2.vue-video-player的安装
注意事项
记住下载这两个包就够了千万不要下载video.js因为vue-video-player会自动下载video.js不然会冲突videojs-contrib-hls该组件是要兼容m3u8格式视频才需要的若是一般的mp4文件则不需要需要注意的是如果你使用的是vue2这里安装时要使用5以下的版本目前最新的6.0.0版本只支持vue3.我这里老项目所以本文以vue2为例
npm install vue-video-player5.0.1 -save npm install videojs-contrib-hls5.15.0 -save 3.vue-video-player的使用
1.引入
在main.js文件里引入vue-video-player的插件 import Vue from vue import VideoPlayer from vue-video-player //引入样式 import vue-video-player/src/custom-theme.css import video.js/dist/video-js.css import videojs-contrib-hls //使用组件 Vue.use(VideoPlayer) 2.简单使用 在页面中使用vue-video-player提供的video-player组件来播放视频
templatedivvideo-player classvideo-player vjs-custom-skin refvideoPlayer :optionsplayerOptions/video-player/div
/templatescript
export default {data() {return {playerOptions: {//视频url设置,直播流为例sources: [{src: https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8,//视频文件地址type: application/x-mpegURL//视频类型这里可以不写如果写一定要写对否则会无法播放}],// 其他设置项notSupportedMessage: 此视频暂无法播放请稍后再试,//提示信息autoplay: true,//是否自动播放controls: true,是否显示控制栏poster: http://path/to/poster.jpg,//视频封面}}},mounted() {// 通过 ref 访问 videoPlayer 组件实例播放this.$refs.videoPlayer.play()}
}
/script调用的时候使用这个对象操作通过this.$refs.videoPlayer.player来设置属性和方法 this.$refs.videoPlayer.player 注意事项
Vue Video Player 使用了 Video.js 库来实现视频播放所以在使用前需要先引入 Video.js 的样式文件,video-player标签的class必须设置成“video-player vjs-custom-skin”你引入的样式才能起作用。Vue Video Player 默认使用了自定义主题样式如果需要自定义样式可以通过引入自定义的 CSS 文件来替换默认样式。可以通过修改 playerOptions 对象来配置播放器的行为例如设置自动播放、是否显示控制栏等。可以通过 this.$refs.videoPlayer 来访问 videoPlayer 组件实例并调用其提供的方法例如播放、暂停等。支持添加多个 source 元素来支持不同格式的视频文件。
3.options常用属性
autoplay:是否自动播放默认为falsecontrols:是否显示控制条播放/暂停等默认为truemuted:是否静音播放默认falseloop:是否循环播放默认falseplaybackRats定义课播放的速率可以传入一个数组
vue-video-player
:options{ playbackRates: [0.5, 1, 1.5, 2] }
/vue-video-playerposter:设置视频封面图片地址language设置控件的语言默认为’en’可选值有’en’、zh-CN’等。sources定义视频源可以传入一个数组每个元素包含一个源地址和类型例如mp4或webm默认为空。
vue-video-player
:options{ sources: [{ src: path/to/video.mp4, type: video/mp4 }] }
/vue-video-playeraspectRatio设置播放器的宽高比可以传入一个字符串形如’16:9’或一个小数宽度除以高度的比例默认为空。 4.常用事件
ready视频播放器准备好时触发。可以在该事件中执行一些初始化的操作比如设置视频源、设置音量等。
video-player readyhandleReady/video-playermethods: {handleReady(player) {player.src http://example.com/video.mp4;player.volume 0.5;}
}
start视频开始播放时触发。可以在该事件中执行一些开始播放相关的操作比如显示播放按钮、隐藏封面图等。play视频播放时触发。可以在该事件中执行一些播放相关的操作比如显示暂停按钮、更新播放进度等。pause视频暂停时触发。可以在该事件中执行一些暂停相关的操作比如显示播放按钮、暂停播放进度等。ended视频播放结束时触发。可以在该事件中执行一些播放结束相关的操作比如显示重新播放按钮、跳转到下一个视频等。error视频出错时触发。可以在该事件中处理错误比如显示错误提示、重新加载视频等。timeupdate视频播放时间更新时触发。可以在该事件中更新播放进度、展示视频当前时间等。volumechange视频音量变化时触发。可以在该事件中更新音量状态、展示当前音量等。play当音频/视频已开始或不再暂停时触发。playing当音频/视频在因缓冲而暂停或停止后已就绪时触发。progress当浏览器正在下载音频/视频时触发。ratechange当音频/视频的播放速度已更改时触发。seeked当用户已移动/跳跃到音频/视频中的新位置时触发。seeking当用户开始移动/跳跃到音频/视频中的新位置时触发。stalled当浏览器尝试获取媒体数据但数据不可用时触发。suspend当浏览器刻意不获取媒体数据时触发。timeupdate当目前的播放位置已更改时触发。volumechange当音量已更改时触发。 waiting当视频由于需要缓冲下一帧而停止时触发
5.常用方法
addTextTrack()向音频/视频添加新的文本轨道。canPlayType()检测浏览器是否能播放指定的音频/视频类型。load()重新加载音频/视频元素。play()开始播放音频/视频。pause()暂停当前播放的音频/视频。
this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暂停
this.$refs.videoPlayer.player.src(src) // 重置进度条复制代码
6.一些回调函数demo templatediv classdemovideo-player classvideo-player vjs-custom-skin refvideoPlayer :playsinlinetrue :optionsplayerOptionsplayonPlayerPlay($event) pauseonPlayerPause($event)endedonPlayerEnded($event)waitingonPlayerWaiting($event)playingonPlayerPlaying($event)loadeddataonPlayerLoadeddata($event)timeupdateonPlayerTimeupdate($event)canplayonPlayerCanplay($event)canplaythroughonPlayerCanplaythrough($event)statechangedplayerStateChanged($event)readyplayerReadied/video-player/div/templatescriptexport default {methods: {// 播放回调 视频系列 startonPlayerPlay(player) {console.log(player play!, player);},// 暂停回调onPlayerPause(player) {console.log(player pause!, player);},// 视频播完回调onPlayerEnded($event) {console.log(player, $event);},// DOM元素上的readyState更改导致播放停止onPlayerWaiting($event) {console.log(player, $event);},// 已开始播放回调onPlayerPlaying($event) {console.log(player, $event);},// 当播放器在当前播放位置下载数据时触发onPlayerLoadeddata($event) {console.log(player, $event);},// 当前播放位置发生变化时触发。onPlayerTimeupdate($event) {console.log(player, $event);},//媒体的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);if (playerCurrentState.timeupdate 3 * 60 this.freeBl) {this.$refs.videoPlayer.player.pause();this.free this.freeBl;}},//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于如果ready事件已经发生它将立即触发该函数。。playerReadied(player) {console.log(example player 1 readied, player);},// 视频 end}}/script
