移动端遇到的问题小结--video
本篇主要是针对Android系统,所遇到的问题。
- 1. video的全屏处理:
这里说的全屏是指针对浏览器的全屏,而不是整个手机的全屏。要想全屏效果只需对video标签加 webkit-playsinline 。
但是这样做会有一个问题:针对偏长的手机,视频会出现居中的效果。针对这种情况,可以对video加属性 object-fit:fill
<video id="myvideo" src="test.mp4" webkit-playsinline="true" object-fit:fill></video>
- 2. video的自动播放:
自动播放是指页面加载完毕后,视频自动开始播放。但是目前而言,Android机是不支持这种自动播放的。
解决办法:引导用户触发滑屏或者touch事件进行触发 video.play() 进行播放
3.移动端设置1px的border:
为解决兼容问题,以下为固定代码。代码放置在需要写border的容器的css样式里面。
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(.5, #ffffff), color-stop(.5, transparent)) top left no-repeat, -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)) bottom left no-repeat, -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), color-stop(.5, #e8e8e8), color-stop(.5, transparent)) top left no-repeat, -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#e8e8e8)) bottom left no-repeat, #ffffff;
background: -webkit-linear-gradient(90deg, #ffffff, #ffffff) top left no-repeat, -webkit-linear-gradient(270deg, #ffffff, #ffffff) bottom left no-repeat, -webkit-linear-gradient(90deg, #e8e8e8, #e8e8e8, rgba(232, 232, 232, 0)) top left no-repeat, -webkit-linear-gradient(270deg, #e8e8e8, #e8e8e8, rgba(232, 232, 232, 0)) bottom left no-repeat, #ffffff;
background: linear-gradient(0deg, #ffffff, #ffffff) top left no-repeat, linear-gradient(180deg, #ffffff, #ffffff) bottom left no-repeat, linear-gradient(0deg, #e8e8e8, #e8e8e8, rgba(232, 232, 232, 0)) top left no-repeat, linear-gradient(180deg, #e8e8e8, #e8e8e8, rgba(232, 232, 232, 0)) bottom left no-repeat, #ffffff;
-webkit-background-size: 0 0, 0 0, 0 0, 100% 1px;
PS:同时可参考该链接:https://zhuanlan.zhihu.com/p/26141351
- 4.移动端页面左右滑屏问题
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
移动端遇到的问题小结--video的更多相关文章
- 浏览器端-W3School-HTML:HTML DOM Video 对象
ylbtech-浏览器端-W3School-HTML:HTML DOM Video 对象 1.返回顶部 1. HTML DOM Video 对象 Video 对象 Video 对象是 HTML5 中的 ...
- 移动端播放直播流(video.js 播放 m3u8 流)
流媒体服务器: wowza 流媒体格式: m3u8 播放端:移动端网页(Android.IOS) 播放工具: video.js 代码如下: <!DOCTYPE html> <html ...
- .NET应用架构设计—服务端开发多线程使用小结(多线程使用常识)
有一段时间没有更新博客了,最近半年都在着写书<.NET框架设计—大型企业级框架设计艺术>,很高兴这本书将于今年的10月份由图灵出版社出版,有关本书的具体介绍等书要出版的时候我在另写一篇文行 ...
- Wechat 微信端正确播放audio、video的姿势
在开发微信项目时,有在项目中播放音频(audio)和视频(video)的需求: 在开发中,我们会遇到的问题 audio.video在Android和IOS系统上的兼容性: video播放完成后,跳出浏 ...
- 关于video标签移动端开发遇到的问题,获取视频第一帧,全屏,自动播放,自适应等问题
最近一直在处理video标签在IOS和Android端的兼容问题,其中遇到不少坑,绝大多数问题已经解决,下面是处理问题经验的总结: 1.获取视频的第一帧作为背景图: 技术:canvas绘图 windo ...
- HTML 5 Audio/Video DOM canplaythrough 事件在移动端遇到的坑
canplaythrough 事件定义和用法 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件. 当音频/视频处于加载过程中时,会依次发 ...
- 移动Web开发小结
以下是做移动端Web开发过程中小结的几个事项:希望能够帮助到大家,同时也方便自己查看: 1,在移动开发页面中,主体盒子的max-width与min-width的设置原因: ①设置max-width是为 ...
- H5——video百花齐放(浏览器自带的播放器)
前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...
- X5内核浏览器,video兼容
使用vue-video-player在移动端微信内置浏览器打开,点击视频自动全屏问题. 参考官方 API 是 H5 同层浏览器的原因,可通过设置video属性来处理. <video-player ...
随机推荐
- 佳佳的Fibonacci
#include<cstdio> #include<cstring> #include<iostream> #include<cmath> #inclu ...
- Sitecore 8.2 页面架构设计:模板与组件
介绍 Sitecore的开放式架构和众多API意味着在Sitecore中实施网站可能会在很多方向上发生偏差.架构的一个特别重要的方面涉及页面构建 - 如何构建Sitecore中的网页? Sitecor ...
- 日志入库-log4j-mysql连接中断问题
mysql5.6 druid1.0.17 log4j 1.2.16 一定时间后无法连接 CommunicationsException: Communications link failure 粗暴 ...
- Qt3D 5.9 and future
2017-05 http://blog.qt.io/blog/2017/05/24/qt3d/ Qt3D future 5.9 Use Qt Quick or QPainter to render i ...
- dynamic的使用
一.在没有dynamic之前,我们想要获取返回object对象里的属性的值时,使用反射的方法来获取该对象的属性值. class Program { static void Main(string[] ...
- java.sql.SQLException: ORA-28000: the account is locked
解决方式:参考博客https://blog.csdn.net/java280580332/article/details/70756533
- jq复制
function funCopy() { var va = $("#va").val(); if (va != "") { var save = ...
- APP压力测试 monkey(新猿旺学习总结)
安卓APP做压力测试 需要配置JDK(Java)和 配置SDK 遮掩才能使用adb命令连接手机进行模拟动作事件进行压力测试 配置 K JDK 与 K SDK 环境 a java 与 与 sdk 用于 ...
- Docker Registry私有仓库搭建
部署registry 准备一个registry.mydocker.com 的证书 对私有registry取名registry.mydocker.com 目录规划 仓库数据目录:/data/docker ...
- pywinauto简单操作写字板的例子
前段时间写了做web程序界面自动化的简单例子,今天写一下windows gui程序界面自动化测例子吧. ps.咱中国人YinKaisheng封装的UIAutomation库也很好用,https://g ...