移动端遇到的问题小结--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 ...
随机推荐
- python3.*的一些笔记
因为使用python越来越频繁,有一些细节的东西经常用后一段时间没去用就会忘记,做些简单的笔记吧. 1.break和continue和pass a = 0 while 1: a+=1 if(a%3== ...
- Python文件操作中的方法:.write()换行
active =Truewhile active: message =input("\nPlease input your name:\n") if message =='q': ...
- 百度API经纬度和地址互相查询
/** * 获取地址对应的坐标 * @param $address * @return array */ function getAddressPoint($address){ $lng = 0; $ ...
- World is Exploding (容斥 + 统计)
题意:满足题目中的式子,a < b && c < d && Va < Vb && Vc > Vd 思路:先求不讨论位置重合的情况 ...
- 0003.5-20180422-自动化第四章-python基础学习笔记--脚本
0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...
- Maven项目集成Jetty
1.新建webapp maven项目. 项目目录结构如下. 2.pom文件添加jetty构建. <project xmlns="http://maven.apache.org/POM/ ...
- PHP中文转拼音
网上大都讲的,都不支持繁体字,毕竟就是一个函数解决的事. 推荐一个很好的扩展,github地址: https://github.com/overtrue/pinyin 怎么用,自己去看就行了.
- angular2 ----字符串、对象、base64 之间的转换
1. JSON对象转化为字符串 let obj = { "name":Ayinger; "sex":"女"; } let str = JSO ...
- Spark大型电商项目实战-及其改良(3) 分析sparkSQL语句的性能影响
之前的运行数据被清除了,只能再运行一次,对比一下sparkSQL语句的影响 纯SQL的时间 对应时间表 th:first-child,.table-bordered tbody:first-child ...
- 论文阅读笔记 Word Embeddings A Survey
论文阅读笔记 Word Embeddings A Survey 收获 Word Embedding 的定义 dense, distributed, fixed-length word vectors, ...