vue2 视频播放 vue-video-player
- 安装
- 引用
- 组件
- 使用组件
安装
vue-video-player vue2版本只支持到5.0.2版本。 vue3 版本的是videojs-player GitHub地址
npm install video.js [email protected] --save
引用
// main.js import VueVideoPlayer from 'vue-video-player' import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css' Vue.use(VueVideoPlayer)
组件
<template>
<div class='videomp4' @dblclick="clickFun()">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@pause="onPlayerPause($event)"
@play="onPlayerPlay($event)"
@ended="onPlayerEnded($event)"
@timeupdate="onPlayerTimeupdate($event)"
@dblclick="clickFun()"
@canplay="onPlayerCanplay($event)"
@fullscreenchange="onPlayerFullscreenChange($event)"
@dblclick.middle= "ondbclick($event)"
@error.once= "onPlayerError($event)"
>
</video-player>
</div>
</template>
<script>
export default {
name: "videoPlayerChild",
props:{
videoUrl: "",
},
data() {
return {
poster: '',
isPlay: false,
playerOptions: {
// playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: false, // 如果为true,浏览器准备好时开始回放
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 是否视频一结束就重新开始。
playsinline: false,
progressBar: 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: this.videoUrl // url地址
// src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D' // url地址
}],
poster: '', // 封面地址
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: false, // 当前时间和持续时间的分隔符
durationDisplay: false, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true, // 是否显示全屏按钮
currentTimeDisplay: false, // 当前时间
playToggle: true, // 播放按钮
volumePanel: false // 静音按钮
}
}
}
},
created() {
// this.onUpdateAspectRatio()
},
computed:{
// player () { return this.$refs.videoPlayer.player },
playsinline () {
let ua = navigator.userAgent.toLocaleLowerCase()
// x5内核
if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null)
{ return false }
else {
// ios端
return true
}
}
},
methods: {
// @ready="playerReadied($event)"添加到组件
// 完了方法:
// playerReadied(player) {
// player.requestFullscreen()//调用全屏api方法
// },
onPlayerTimeupdate(player) {
// this.onUpdateAspectRatio();
//判断移动端还是pc端
if ("cordova" in window) {
if (player.player_.isFullscreen_ == true) {
screen.orientation.lock('landscape');
} else {
screen.orientation.lock('portrait');
}
}
},
onPlayerFullscreenChange($event){
console.log("FullscreenChange")
},
/*全屏播放*/
playfullscreen(){
// this.$refs.videoPlayer.player.fullscreen()
this.$refs.videoPlayer.player.requestFullscreen()
},
/*退出全屏播放*/
outfullscreen(){
},
onPlayerCanplay (player) {
var ua = navigator.userAgent.toLocaleLowerCase()
if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
$('body').find('video').attr('x-webkit-airplay', true).attr('x5-playsinline', true).attr('webkit-playsinline', true).attr('playsinline', true)
} else {
$('body').find('video').attr('webkit-playsinline', 'true').attr('playsinline', 'true')
}
},
onUpdateAspectRatio(){
const pin = this.$getViewportSize()
this.playerOptions.aspectRatio =
pin.width+
':' +
pin.height;
},
onPlayerPause($event) {
// console.log("暂停了.....")
this.isPlay = false;
},
onPlayerPlay($event) {
// console.log("播放了.....")
this.isPlay = true;
},
onPlayerEnded($event) {},
// 暂停
stopVieo(){
// console.log("暂停视频")
this.$refs.videoPlayer.player.pause();
this.isPlay = false;
},
onPlayerError(){
console.log("视频出错")
},
ondbclick() {
this.onPlayerClick()
},
onPlayerClick() {
if (this.isPlay) {
this.$refs.videoPlayer.player.pause();
this.isPlay = false;
} else {
this.$refs.videoPlayer.player.play();
this.isPlay = true;
}
},
clickFun(){
var clickid = 1;
var timer = null;
function a() {
console.log('点击');
}
function b() {
console.log('双击');
}
let startTime = new Date().getTime();
if(clickid === 1) {
clickid++;
timer = setTimeout(function () {
a(); // 单击事件触发
clickid = 1;
}, 300)
}
if(clickid === 2) {
clickid ++ ;
} else {
var endTime = new Date().getTime();
if ((endTime - startTime) < 300) {
b(); // 双击事件
clickid = 1;
clearTimeout(timer);
}
}
}
},
watch: {
url(val){
console.log("视屏地址")
this.playerOptions.sources[0].src = val;
}
}
}
</script>
<style lang="scss" scoped>
.videomp4{
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
}
/*播放按钮*/
::v-deep .vjs-play-control{
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: center;
justify-content: center;
}
::v-deep .video-js .vjs-play-control .vjs-icon-placeholder:before{
order:1;
position:(static !important);
}
::v-deep .vjs-play-control:focus-visible {
outline: -webkit-focus-ring-color auto 0px;
}
/* 全屏*/
::v-deep .vjs-fullscreen-control{
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: center;
justify-content: center;
}
::v-deep .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
order:1;
position:(static !important);
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-modal-dialog, .vjs-modal-dialog .vjs-modal-dialog-content{
}
/*进度条圆圈 ● */
//::v-deep .video-js .vjs-play-progress:before{
// font-size:2.5em;
//}
//::v-deep .vjs-custom-skin > .video-js .vjs-play-progress:before{
// top: -0.4em;
//}
</style>
使用组件
<!-- 视屏播放 -->
<el-dialog :visible.sync="videoOpen" >
<video-player-child :video-url="videoUrl" ref="dialogVideo" v-if="videoOpen"></video-player-child>
</el-dialog>
...
import videoPlayerChild from "@/views/components/videoPlayerChild.vue";
...
components: {
videoPlayerChild
},
...
videoOpen: false,
videoUrl: "",
...
palyMovies(row){
this.videoUrl = process.env.VUE_APP_BASE_API + row.movieUrl;
this.videoOpen=true
}