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('重新计算大小');
});
},
})
android仿微信播放视频播放器,vue DPlayer 仿微信朋友圈视频播放效果相关推荐
- android bmob 朋友圈,仿微信朋友圈视频效果 – MVideo
MVideo 仿微信朋友圈视频效果,可以拖拽及缩放,视频查看,基于ijkplayer. Demo 入门 Step 1:在buil文件中添加JitPack仓库: allprojects { reposi ...
- android+分享微信朋友圈带编辑功能,新功能 微信6.6.6安卓版发布:朋友圈编辑可保留...
原标题:新功能 微信6.6.6安卓版发布:朋友圈编辑可保留 [PConline资讯]本月月初,微信团队向iOS用户推送了微信6.6.6的更新,而安卓用户则只能够参加到新版的Beta测试中去.就在今天, ...
- [html] H5页面在微信中如何禁止分享给好友和朋友圈?
[html] H5页面在微信中如何禁止分享给好友和朋友圈? 利用JSBridge实现调用微信提供的一些原生功能,可以通过调用隐藏操作菜单来实现禁用分享. 代码如下: document.addEvent ...
- 微信重大更新,mac版可刷朋友圈!可以看,可以评论! 支持M1
微信重大更新,mac版可刷朋友圈!可以看,可以评论!微信Mac电脑版是官方推出的针对Mac用户设计的客户端产品,Mac上有六亿多庞大用户群体在使用微信客户端聊天工具,可以发送文字.语音.图片和视频,还 ...
- 微信小程序使用wxa-plugin-canvas分享海报和朋友圈
之前在写海报的时候自己也封装过一个,这里再给大家推荐一个组件wxa-plugin-canvas.目前就使用感来说还是不错的.这里有一个开源的地址,大家可以把它下载下来放进自己的组件中 开源项目地址:h ...
- 调用个人微信API协议接口收发消息,发朋友圈
调用个人微信API协议接口收发消息,发朋友圈 java调用个人微信的API接口收发消息 /** * 接受微信好友发来聊天消息 * @author wechatno:tangjinjinwx * @pa ...
- android朋友圈自动播放,微信安卓7.0.5内测新版功能 朋友圈视频自动播放关闭设置...
微信安卓7.0.5内测新版功能.微信又迎来了新的版本,虽然这次是小版本的更新,不过带来的新功能却挺好用的,一起来看看吧.这个版本的微信尚处于内测阶段想要尝鲜的用户还需要等等. 微信视频动态增强 图片秒 ...
- html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
- 微信hash ajax,基于vue hash模式微信分享#号的解决
看代码吧~ // 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出 ...
- python制作视频播放器_Python应用03 使用PyQT制作视频播放器
最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/Tk和QT.相比之下,我觉得PyQT使用起来更加方便,功能也相对丰富.这一篇用PyQT实现一个视频播放 ...
最新文章
- 大数相乘--极简单的思路
- 【OJ】OJ的介绍和常用OJ推荐
- 6.29 Vue 第二天 学习笔记
- Ubuntu 下常用的命令 简略记录
- 51nod 1267 4个数和为0
- 在AWS控制台里创建key Pair
- 5W-Lora电台的远距离传输优势
- Apollo进阶课程㉛丨Apollo ROS概述
- win11怎么退回win7 Windows11退回win7的步骤方法
- 2020 年的第一天,程序员鸭血粉丝又碰上生产事故
- 微软MDT 安装与配置(二)
- paraview打开黑屏_ParaView使用指南---ParaView-1.4-使用指南.pdf
- 烟大计算机考研二战,以坚持铺就考研之路——记经济管理学院考研优秀个人程林林...
- 20220525商汤算法岗实习面试经历
- 小记 xian80 坐标转换 wgs84
- 再读 Laravel 5.5 文档
- wps的linux文字显示模糊,wps电脑打开文字模糊怎么办
- jquery仿钉钉流程图制作。
- 电脑文件夹的展示方式
- 为什么技术面过了却挂在了HR面试之”谈谈你的职业生涯规划“
热门文章
- 地级市交通基础设施数据,省份交通基础设施数据,处理好的面板数据(excel或stata版本)
- 银行卡验证(四要素)和银行联行号查询
- JAVA流-File文件
- 腾讯云人脸支付常见问题和解答,以及腾讯云人脸支付相关介绍
- 1688淘口令链接API接口-item_password-获得淘口令真实url 接口,淘口令API接口
- E盾网络验证企业版离线版成品EXE DLL加密源码加密网络验证
- HTTP Server:从头开始构建简单HTTP服务器需要了解的所有内容
- logisitic 回归 +极大似然法 + 梯度下降法 (迭代优化)
- 微信公众号文章排版php,微信内容排版工具总结
- matlab积分器的工作原理,转 Simulink积分器详解(图)