video-player [ 视频播放插件 ]

安装依赖

npm install vue-video-player --save

导入到main.js

import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'Vue.use(VideoPlayer)

实际使用

      <video-playerref="videoPlayer"class="video-player vjs-custom-skin":playsinline="true":options="playerOptions"@play="onPlayerPlay($event, playerOptions)"@pause="onPlayerPause($event)"v-for="(item, index) in 20":key="index"/>
data域 数据 playerOptions: {playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度autoplay: false, // 如果true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: 'zh-CN',aspectRatio: '16:7', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm' // url地址}],hls: true,poster: 'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg', // 你的封面地址width: document.documentElement.clientWidth, // 播放器宽度notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true,//时间分割线durationDisplay: true,//总时间remainingTimeDisplay: false,//剩余播放时间progressControl: true, // 进度条fullscreenToggle: true // 全屏按钮}

css 部分

.vjs-custom-skin {position: relative;width: 19%;}
必须声明该部分 不然不能显示视频 细节可以自己调整

修改默认样式

如果要更改样式，可以在根目录新建一个style目录和样式文件，单独引入
require('../styles/video/video.css')

修改组件

computed: {player() {return this.$refs.videoPlayer.player //自定义播放}},
这里的目的是 暴露出 player 对象
可以使用 this.player 来调用api 实现自定义按钮

回调函数

 // 点击播放@play="onPlayerPlay($event)"// 点击暂停@pause="onPlayerPause($event)"// 视频播放完 @ended="onPlayerEnded($event)"// DOM元素上的readyState更改导致播放停止@waiting="onPlayerWaiting($event)"// 已开始播放回调@playing="onPlayerPlaying($event)"// 当播放器在当前播放位置下载数据时触发@loadeddata="onPlayerLoadeddata($event)"// 播放时间更新时@timeupdate="onPlayerTimeupdate($event)"// 媒体的readyState为HAVE_FUTURE_DATA或更高@canplay="onPlayerCanplay($event)"// 媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。  @canplaythrough="onPlayerCanplaythrough($event)"// 播放状态改变回调@statechanged="playerStateChanged($event)"// 将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数@ready="playerReadied"

断点续播

 绑定ready 事件 在函数中调用 currentTime(time) 设置已播放的事件

video-player [ 视频播放插件 ]相关推荐

linux 视频插件,avpro video 插件-Avpro Video(Unity视频播放插件)下载 v1.039官方免费版--pc6下载站...
AvproVideo是一款由强大团队出品的可以在Unity上安装使用的万能多平台视频播放插件AvproVideo支持WindowslinuxiosmacAndroid等多平台万能播放.. 相关软件软件 ...
Mine Video Player – 视频播放器WordPress插件
介绍: 轻松实现视频在wp页面播放,支持剧集列表,支持多组视频来源,这款视频播放器WordPress插件支持m3u8/mp4等网页视频格式,同时支持直播源,也可将主流视频站的视频通过第三方程序来播放, ...
video.js 视频播放插件使用
video.js 实现视频播放,多种语言字幕点击切换 1.参考链接video.js官网 https://videojs.com/ 2.html代码视频资源标签source track 字幕资源标签,在 ...
vue项目里面使用video.js视频播放插件
项目里面需要实现一个视频播放列表如上图所示的列表~~~过程如下: 引入video.js文件 npm install -S video.js 在main.js里面引入相关文件,并挂载在window对象 ...
Html5 jquery视频播放插件Video.js
<!doctype html> <html> <head><meta charset="utf-8"><title>Vi ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
WordPress插件 Fox Video Player 独家HTML5广告视频播放器插件[更新至v3.0.1]
Fox Video Player 是一款独家HTML5广告视频播放器WordPress插件,方便把你的网站转换成一个多媒体站点,尤其独特的视频插入广告像优酷这样的在视频播放前播放广告,当然你也可以设置 ...
使用Raw Image和Unity自带的视频播放插件Video Player
使用Raw Image和Unity自带的视频播放插件Video Player导致视频不清晰先创建Raw Image 在Raw Image身上添加Video Player和Audio Source组件 ...
unity android 播放器,Unity3D 安卓视频播放插件 WRP Android Video Player Pro
通过这个安卓视频播放插件,你可以在你的Unity3D 项目中针对很容的播放视频. Easily play videos in your Unity Android Projects with this ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...

video-player [ 视频播放插件 ]

video-player [ 视频播放插件 ]相关推荐

最新文章

热门文章