vue-video-player基本使用

项目上有一个新的需求，点击视频全屏播放，当即想到了video.js插件，兼容性好，比原生video好用多了。因为项目用的是vue-element-ui技术栈，考虑技术的融合性，最终使用了vue-video-player

首先是npm i vue-video-player -D 安装依赖
在main.js里面引入

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

此处代码主要是用来覆盖video的播放按钮样式
require('./styles/video.css');具体内容如下

 .video-js .vjs-big-play-button {width: 72px;height: 72px;border-radius: 100%;z-index: 100;background-color: #ffffff;border: solid 1px #979797;}

vue组件中使用

<template><div class="player"><video-player class="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true"style="object-fit:fill":options="playerOptions":x5-video-player-fullscreen="true"@pause="onPlayerPause($event)"@play="onPlayerPlay($event)"@fullscreenchange="onFullscreenChange($event)"@click="fullScreen"></video-player></div>
</template>

<script>import test from '@/assets/workDetail/test.png'import {videoPlayer} from 'vue-video-player';export default {components: {videoPlayer},data() {return {pictureImg: test,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:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: "video/mp4",src: "你的视频地址"}],poster: "你的封面地址",width: document.documentElement.clientWidth,notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {// timeDivider: true,// durationDisplay: true,// remainingTimeDisplay: false,fullscreenToggle: true  //全屏按钮}}}},methods: {fullScreen() {const player = this.$refs.videoPlayer.playerplayer.requestFullscreen()//调用全屏api方法player.isFullscreen(true)player.play()},onPlayerPlay(player) {player.play()},onPlayerPause(player) {// alert("pause");}},computed: {player() {return this.$refs.videoPlayer.player}}}</script>

vue-video-player基本使用相关推荐

视频列表html页面,vue + video.js实现视频列表页（多个视频）
vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑到手机浏览器兼容问题,找了很多插件,最后决定用video.js这个插件来实现.Vide ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
Unity流水账2：视频播放之Video Player
VideoPlayer组件使用VideoPlayer组件可以将视频文件附加到GameObjecs,并在运行时,在GameObject的Texture上播放它们. 默认情况下,Video Pl ...
Android Video Player. 安卓视频播放器，封装 MediaPlayer、ExoPlayer、IjkPlayer。模仿抖音，悬浮播放，广告播放，列表播放，弹幕
DKVideoPlayer 项目地址:dueeeke/DKVideoPlayer 简介: Android Video Player. 安卓视频播放器,封装 MediaPlayer.ExoPlayer. ...
VR视频播放器Video Player
一.通过blender进行建模 1.下载并进行安装快捷键: ①A:全选 ②X:把场景中所有的组件都删掉,按下X后点击Delete X ,则场景会被清空 ③Shift+A:生成一个物体或 ...
Elmedia Video Player Pro 7.15 中文版强大的mac视频播放器
Elmedia Video Player 是Mac毒搜集到的一款 Mac 多媒体播放器. 它可以播放几乎任何音视频文件类型,无论是 AVI,MP4,FLV,SWF, WMV,MKV,MP3,M4V 等 ...
WordPress插件 Fox Video Player 独家HTML5广告视频播放器插件[更新至v3.0.1]
Fox Video Player 是一款独家HTML5广告视频播放器WordPress插件,方便把你的网站转换成一个多媒体站点,尤其独特的视频插入广告像优酷这样的在视频播放前播放广告,当然你也可以设置 ...
专业音视频播放器：Elmedia Video Player Pro mac中文版
为大家推荐一款超级好用的苹果专用视频播放器,Elmedia Video Player Pro for Mac几乎支持所有的音视频格式,具备修改播放.流式传输.画中画.流传输视频到其他设备.彩色主题.观 ...

vue-video-player基本使用

vue-video-player基本使用相关推荐

最新文章

热门文章