android视频播放处理,安卓版微信视频播放全屏处理
问题
在安卓版微信里,video在播放的时候,如果在没有做任何处理的情况下,微信会全屏播放你的视频,会严重影响一些例如直播之类的边看视频边交互的H5应用(注:在iOS里可以通过playsinline(iOS10之前需要写成webkit-playsinline)这个属性来让视频不默认全屏播放)。示例如下:
代码:
测试微信视频
video {
width: 300px;
height: 200px;
}
JavaScript,一种高级编程语言,通过解释执行,是一门动态类型,面向对象(基于原型)的解释型语言[4]。它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化[4]。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、FireFox、Safari、Opera)支持。JavaScript是一门基于原型、函数先行的语言[5],是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。
图片:
未播放时:
未播放时
播放时:
播放时
可以看到第二个图里播放视频的时候下面的文字就不见了,会严重影响用户体验,不只是微信,很多国产浏览器都会被视频劫持播放...哎!用原生的不好吗?
解决方法
和微信达成某种py交易,据我发现有些视频网站在安卓版微信里是可以内联播放的,和iOS上保持一致。(
还好微信还是留了些后路,下面我来说一下第二种方法的具体操作。
具体操作
注意看x5-video-player-type这个属性以及x5videoenterfullscreen、x5videoexitfullscreen这两个事件
x5-video-player-type可以让视频播放的时候,视频上可以有其他元素,那么我们可以在视频播放的时候把视频作为整页面的背景其他元素放在视频之上。
css中video的object-fit以及object-position可以将真正的视频放在容器该有的位置。
好了有了以上的东西,直接上代码看效果吧(为了方便我这里要引入一下早已被大佬抛弃的jQuery):
完整代码
测试微信视频
html, body {
margin: 0;
padding: 0;
height: 100%;
}
video {
width: 100%;
height: 211px;
}
video.android-full {
position: relative;
height: 100%;
object-fit: contain;
object-position: left 0 top 0;
}
video.android-full::-webkit-media-controls-enclosure {
-webkit-appearance: none;
position: absolute;
top: 166px;
}
.desc.android-full {
position: absolute;
top: 211px;
}
src="https://www.seastart.tv/introduce.mp4"
x5-video-player-type="h5"
playsinline
webkit-playsinline
controls>
JavaScript,一种高级编程语言,通过解释执行,是一门动态类型,面向对象(基于原型)的解释型语言[4]。它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化[4]。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、FireFox、Safari、Opera)支持。JavaScript是一门基于原型、函数先行的语言[5],是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。
var $video = $('video');
var $desc = $('.desc');
$video[0].addEventListener('x5videoenterfullscreen', function() {
$video.addClass('android-full');
$desc.addClass('android-full');
});
$video[0].addEventListener('x5videoexitfullscreen', function() {
$video.removeClass('android-full');
$desc.removeClass('android-full');
});
效果图:
效果图
可以看到才有这个方法可以算是比较好的处理安卓版微信这个问题,虽然还有些瑕疵,不过也还行:)
android视频播放处理,安卓版微信视频播放全屏处理相关推荐
- 谷歌pixel3axl开发者模式_谷歌彻底取消开发者大会!安卓版微信“暗黑模式”要来了...
谷歌2020年度 I/O开发者大会完全取消 据外媒CNBC报道,由于新冠病毒的持续蔓延,谷歌已经完全取消2020年度的谷歌I/O开发者大会.谷歌曾在3月3日宣布取消谷歌I/O开发者大会现场活动,转为线 ...
- html5微信视频禁止自动全屏,关于HTML5 video标签在安卓版微信浏览器内被强行全屏播放的问题...
最近在一个H5项目中,碰到了传说中的video标签在安卓版微信浏览器内被强行全屏播放问题.原计划在视频播放完毕后,页面出现video的ended事件时,应该显示分享和处于转化页的按钮,如图: 然而在这 ...
- 强制 html5 播放,关于HTML5 video标签在安卓版微信浏览器内被强制全屏播放的问题...
最近在一个H5项目中,碰到了传说中的video标签在安卓版微信浏览器内被强制全屏播放问题.原计划在视频播放完毕后,页面发生video的ended事件时,应该显示分享和进入转化页的按钮,如图: 然而在很 ...
- android 8.0发布直播,安卓版微信8.0内测版来了
原标题:安卓版微信8.0内测版来了 2021年1月21日是微信十周年,微信也第一时间推送了全新的8.0版本,依旧是iOS用户优先,这让不少安卓党羡慕嫉妒恨.不过没有关系,按照以往惯例,安卓内测版会立马 ...
- Android视频播放器实现小窗口和全屏状态切换
Android视频播放器实现小窗口和全屏状态切换 实在是不好意思,楼下评论的兄弟久等了,这文章一直没写第一是没时间,第二是自己准备也不充足,最近才看了好几个Android视频播放器的开源项目,才对视频 ...
- 微信 android 省略号,安卓版微信再现重大Bug,点击链接直接崩溃
原标题:安卓版微信再现重大Bug,点击链接直接崩溃 [PConline 资讯]微信作为当下即时通信软件,日均活跃用户数量高达10亿人.就是这样一款高活跃度软件,Bug却频频出现. 3月3日,有大量网友 ...
- android微信照片,一张能让安卓版微信崩溃的图片
这两天,有一张 gif 图片在群里疯传,就是下面的这张: 样本文件 md5:653b5f03a500b82a3949740d6aedc0f9 安卓版微信在加载这张图的过程中,会出现闪退,而且概率非常高 ...
- 微信6.5.10版 android,安卓版微信6.5.10版发布:这些新功能你都知道么?
原标题:安卓版微信6.5.10版发布:这些新功能你都知道么? 对于微信大家都很熟悉吧,之前微信只能在手机上使用,现在电脑版微信也有了,所以大家一般每天都是在刷微信中度过,不是在微信聊天,就是在微信聊天 ...
- android微信个人界面设计,安卓版微信主界面的再设计
聊天界面 前段时间刚刚上手Axure,因为某些契机,根据自己主观需求重新设计了安卓版微信界面.与现在版本区别主要是更加符合安卓的设计原则,同时对"发现"以及"我" ...
最新文章
- C语言入门经典读书笔记 ----第六章 字符串和文本的应用
- ZJOI2019 Day2 游记
- Hyper-V群集对群集复制
- 1053 Path of Equal Weight
- 计算机java语言教程,计算机JAVA教程二讲Java语言基础知识.doc
- Python2 常见问题
- 入库成本与目标成本对比报表中我学到的东西
- 计算机科学必读书籍_5篇关于数据科学家的产品分类必读文章
- 常用Python文件
- 判断是否为长按_【物流知识】物流配送合理化判断7大标志
- 整理下开发中常用的第三方库
- 结对开发2(求二维数组的最大子数组和)
- 【离散期末复习】:集合论
- 采集的时候,列表的编码是gb2312,内容页的编码却是UTF-8,这种网站怎么采集?
- CF1042C Array Product
- python九九乘法表代码
- XTU-oj 字符矩阵
- 修复inspinia中popover的点击问题
- 老师偷偷塞给我一份资料,封面写着《操作系统》,下面一行小字
- jmeter 取样器
热门文章
- ERROR 2002 (HY000): Can‘t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock‘
- UNET详解和UNET++介绍(零基础)
- 45个网页中充满创意的字体排版
- 织梦dedecms如何去除版权中的Power by DedeCms
- 《NASA对N+3代先进飞行器概念设计最终报告》阅读笔记
- 重要的话说三遍 (5分)
- class jqprint 失效_响应式状态时的jqprint打印
- C语言字符串的长度与大小
- Leetcode 875. 爱吃香蕉的珂珂
- AD PCB布局拖动元器件时出现的红线、绿线(Optimal Placement Vector)