android仿微信播放视频播放器,vue DPlayer 仿微信朋友圈视频播放效果

html

css

.dplayer {

width: 100%;

}

.dplayer-controller {

/* 底部控制条 */

display: none;

}

.dplayer-notice {

/* 快退进提示 */

display: none;

}

.dplayer-menu.dplayer-menu-show {

/* 右键信息 */

display: none;

}

.dplayer-mask {

/* 悬浮层 */

display: inline-block;

}

js

var app = new Vue({

el: '#app',

data() {

return {

Player: true,

dp: '',

dpshow: false

}

},

methods: {

evt() {

that = this;

that.dpshow = true;

that.dp.play();

// ios 下播放器全屏还是会被自带播放器接管

// that.dp.fullScreen.request('browser');

//所以要使用网页全屏

that.dp.fullScreen.request('web');

// 显示通知

// that.dp.notice("text:测试", "time:10")

console.log("开始播放");

},

quan() {

that = this

console.log("播放后事件监控");

var current = that.dp.video.currentTime;

//只要开始播放点击视频就关闭

if (current > 0) {

console.log(current);

// that.dpshow = false;

// that.showVideo = false

//设置视频时间跳转到结尾可自动触发 暂停和播放完毕

// 如果 设置 跳转时间大于视频时间会小卡

//设置跳转到末尾兼容性不太好

// that.dp.seek(999);

that.dp.pause();

// that.dp.fullScreen.cancel('browser');

// ios 下取消网页全屏会导致 闪屏 可以不取消 直接隐藏元素即可

//that.dp.fullScreen.cancel('web');

console.log("点击取消全屏");

}

},

qie() {

that = this

if (that.Player) {

//切换视频

that.dp.switchVideo({

url: 'http://cdn.toxicjohann.com/lostStar.mp4',

// 设置视频第一帧为封面

// pic:"http://cdn.toxicjohann.com/lostStar.mp4 + '?vframe/jpg/offset/1'",

// thumbnails: 'second.jpg'

});

that.Player = !that.Player

console.log("切视频1");

} else {

//切换视频

that.dp.switchVideo({

url: 'https://chimee.org/vod/1.mp4',

});

that.Player = !that.Player

console.log("切视频2");

}

}

},

mounted() {

that = this

that.dp = new DPlayer({

container: document.getElementById('dplayer'),

preload: 'auto', //预加载

screenshot: false, // 屏幕截图

autoplay: false, //自动播放

mutex: true, //互斥，阻止多个播放器同时播放

volume: 1, //默认音量

video: {

url: 'https://chimee.org/vod/1.mp4',

// pic: 'hikarunara.png',

// thumbnails: 'hikarunara_thumbnails.jpg'

},

});

that.dp.on('fullscreen_cancel', function () {

// browser 全屏状态 才可以监控到 ios 监控不到

console.log('取消全屏');

});

document.querySelector(".dplayer-mask").addEventListener('click', function (e) {

// ios 下 开始播放被执行一次 之后又会被执行一次

//这样可以防止ios下直接点击#dplayer 而导致闪屏问题

//另外 如果在#dplayer 新建元素会无法显示

console.log("监听 dplayer-mask 点击");

that.pauseVideo();

}, false);

that.dp.on('pause', function () {

//ios可以监控到

// ios 下 手动点击隐藏播放器会 小闪屏，自动播完 监控到的暂停就不会闪屏

console.log('暂停播放');

that.dpshow = false;

that.dp.seek(0);

console.log("切换展示", that.dpshow);

});

that.dp.on('emptied', function () {

console.log('耗尽什么鬼？');

});

that.dp.on('ended', function () {

//ios可以监控到

console.log('视频播放完成');

that.dpshow = false;

that.dp.seek(0);

console.log("切换展示", that.dpshow);

});

that.dp.on('resize', function () {

//ios browser 全屏状态下监控不到

console.log('重新计算大小');

});

},

})