微信视频播放器隐藏播放控件,视频全屏做法分享
转自:https://www.haorooms.com/post/weixin_hidevideo_control
本人实测有效。为了防止以后还要用到,到时候找不到,所以转载一下。
前言
平时项目中视频播放用的不多,以至于前段时间h5婚礼邀请函视频部分,微信中一直去除不了微信播放器控件,导致视频播放结束甚至还有广告产生。以为要设置域名白名单,腾讯相关域名才能解决这个问题。为此,之前还写了一篇文章“移动端video视频播放的痛”,用把视频转为canvas,但是没有效果!最近公司项目中用到了视频直播技术,HLS、webRTC 等我后面再写相关文章,我研究了一下微信中分享的直播,他们的直播都是没有视频播放器的,而且div可以直接覆盖在视频之上。那这是如何做到的呢? 经过研究终于解决了这个问题!其实这个很简单,只是之前不知道罢了!
object-fit属性介绍
object-fit是一个css3属性,可以让图片或者视频适应外部容器。目前这个属性除了IE浏览器以外,其他主流浏览器都支持。 属性如下:
/* Keyword values */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: unset;
图片width是外层容器的18%;height撑满整个容器,各个属性展示如上图。
假如不想视频变形,我们可以用
object-fit: cover;
填满手机。 假如想看到完整视频,不在乎视频微小变形,可以用
object-fit:fill
object-fit属性可以解决视频出现上下黑边,不能全屏的问题。
视频全屏处理
ios加playsinline属性,之前只带webkit前缀的在ios10以后,会吊起系统自带播放器,两个属性都加上基本ios端都可以保证内敛到浏览器webview里面了。如果仍有个别版本的ios会吊起播放器,还可以引用一个库iphone-inline-video,github地址:https://github.com/bfred-it/iphone-inline-video。
<video id="haoroomsvideo" src="haorooms.mp4" playsinline webkit-playsinline></video>
上面代码经过测试在ios端微信没有出现问题,但是安卓手机还是会出现问题,我们再介绍如下属性:
x5-video-player-type="h5"
完整video属性介绍
<videoid="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.jpg" /*视频封面*/preload="auto" webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/ playsinline="true" /*IOS微信浏览器支持小窗内播放*/ x-webkit-airplay="allow" x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/x5-video-player-fullscreen="true" /*全屏设置,设置为 true 是防止横屏*/>x5-video-orientation="portraint" /*播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏*/style="object-fit:fill">
</video>
x-webkit-airplay="allow"
猜测,这个属性应该是使此视频支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐还有照片文件,也就是说通过AirPlay功能可以实现影音文件的无线播放,当然前提是播放的终端设备也要支持相应的功能。
x5-video-orientation
声明播放器支持的方向,可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放,但是这个属性需要x5-video-player-type开启H5模式
就解释这2个属性,x5-video-player-type="h5" 这个属性上面已经介绍,其他属性都比较简单,字面意思就可以理解,就不介绍了!
自动播放
android始终不能自动播放,不多说。值得一提的是经测现在ios10后版本的safari和微信都不让视频自动播放了(顺带音频也不能自动播放了),但微信提供了一个事件WeixinJSBridgeReady,在微信嵌入webview全局的这个事件触发后,视频仍可以自动播放,这个应该是现在在ios端微信的视频自动播放的比较靠谱的方式,其他如手q或者其他浏览器,建议就引导用户出发触屏的行为操作出发比较好。
//也可以在这个事件触发后播放一次然后暂停(这样以后视频会处于加载状态,为后面的流畅播放做准备)
document.addEventListener("WeixinJSBridgeReady", function (){ video.play();video.pause();
}, false)
播放控制短暂黑屏处理
当第一次播放视频的时候ios端,如果网络慢,视频从开始播到能展现画面会有短暂的黑屏(处理视频源数据的时间),为了避免这个黑屏,可以在视频上加个div浮层(可以一个假的视频第一帧),然后用timeupdate方法监听,视屏播放及有画面的时候再移除浮层
video.addEventListener('timeupdate',function (){//当视频的currentTime大于0.1时表示黑屏时间已过,已有视频画面,可以移除浮层(.pagestart的div元素)if ( !video.isPlayed && this.currentTime>0.1 ){$('.pagestart').fadeOut(500);video.isPlayed = !0;}
})
css非全屏下面视频播放控件样式修改
大体属性如下:
video::-webkit-media-controls-fullscreen-button {display: none;
}
video::-webkit-media-controls-play-button {background: green;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
修改后展现如下图:
隐藏下载按钮
video::-internal-media-controls-download-button {display:none;
}
video::-webkit-media-controls-enclosure {overflow:hidden;
}
video::-webkit-media-controls-panel {width: calc(100% + 30px);
}
js操作美化视频播放控件
这个插件已经上传到前端资源库,具体请看 http://resource.haorooms.com/showdemo.html?id=276
附录
haorooms结婚邀请函视频部分观看,微信扫描二维码
微信视频播放器隐藏播放控件,视频全屏做法分享相关推荐
- html5--移动端视频video的android兼容,去除播放控件、全屏等
android下html5的视频播放一直是前端兼容的重灾区,各种体验差,被诟病已久.但之前的故宫穿越H5,和吴亦凡入伍H5,利用的视频技术,貌似又给人一种新面貌. 前段时间做某项目,恰好也是一个类似视 ...
- 微信小程序 音乐播放控件,监听播放事件, 音乐播放的基本实现
下面我将会为大家初步讲解利用微信小程序的音乐控件制作音乐播放器,以及会遇到的一些问题,最后会附上源码包喔! 图片以及音乐都必须使用网络链接体 播放器 播放之后闪退,是因为音乐的链接失效了所以 闪退 监 ...
- MFC中CSTATIC控件双击全屏/双击恢复
双击全屏方法有两种 1.双击放大的时候调static控件的父句柄SerParent让控件的父句柄变成桌面,然后再提取桌面的分辨率用movewindow或者setwindowpos改变控件大小.恢复成原 ...
- android 语音播放工具,Android简易的仿微信聊天的语音播放控件
说到Android音频播放,可谓108式,方案众多,这里有一篇总结Android几种播放音频的方式的文章,传送门.本文旨在熟悉MediaPlayer的使用,遂此控件封装采用MediaPlayer实现. ...
- 学习总结-Cyberplayer视频播放器移动端手机百度打开全屏问题探究
[最新版本的已经修复屏蔽了双击]移步https://bce.bdstatic.com/jwplayer/4.1.6.1/cyberplayer.js [问题背景] 移动端h5页面使用了Cyberpla ...
- android 优酷 自动全屏播放,Android用Webview播放优酷视频全屏问题
在播放优酷视频, 点击全屏的时候, 会黑屏, 而不显示需要全屏的view 试过各种方法, 发现有一些细节需要注意: 1. demo的Manifest Activity需要设置为: 全屏, 横屏 and ...
- 微信小程序ios系统下viedo视频全屏无法遮挡fixed事件的解决办法
之前博主遇到过一个巨巨巨大的坑,困扰了我很久都没有找到原因,其实现在我也没有找到具体的原因,如果有同学知道的话可以给我留言哦,先po一下具体遇到的bug 当进入全屏的时候,底部fixed固定的tab栏 ...
- wmp控件_始终在WMP 12上的“正在播放”模式下显示播放控件
wmp控件 When your playing music or a video in Windows Media Player in Windows 7, you can toggle the pl ...
- uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
最新文章
- iOS 字符串加密至MD5
- python代码需要背吗-Python面试必须要看的15个问题
- 改变按钮在iPhone下的默认风格
- php在線評論,php在線生成pdf筆記 | 學步園
- Pyqt5:使用多线程QThread
- DNS Server 的设置使用
- SEO之关键词选择原则
- 服务器显示器分辨率,屏幕分辨率修改
- 计算机网络自顶向下WireShark实验:IP
- Git 团队协作中常用术语 WIP PTAL CC LGTM 等解释
- c语言实现输入电压检测,STC12C2052AD单片机AD转换C语言程序的实现
- MATLAB地图工具箱学习总结(三)地图工具箱的基本知识
- 元气森林们迈入新消费后时代
- 台积电全球员工薪酬中位数约46万,CEO约899万;苹果上调日本的 iPhone 售价 ;Vim 9.0 发布|极客头条...
- 领导绝不会告诉你的,提拔干部的三大关键因素
- 铁威马NAS媒体索引设置教程
- 一文读懂,CPU、精简指令集、复杂指令集该如何理解?
- 实用的费曼学习法 | 一些思考
- 学习黑客必须要掌握的DOS命令全集
- 2019智能手表推荐_2019年最佳Android Wear智能手表选购清单