如何制作一个完美的全屏视频H5
写在前面的话:
最近一波H5广告火爆整个互联网圈,身为圈内人,我们怎能 不! 知!道!
:( 嘘!真不知道的也继续看下去,有收获 ↓ )
So,搞懂这个并不难。
这篇文章将带你从头到尾了解H5广告的实现。
本文主要讲一下几个关键点
一、视频内联播放。
-- 想要营造一种文字与视频混排的现象,视频不要影响其他模块
二、视频去控件。
-- 交互视频,不能点击快/慢进或暂停哦
三、去控件全屏播放。
-- 想要模拟 明星给我打电话的体验,不能看到明显的视频播放器
四、视频自动播放。
-- 想要释放用户操作,打开链接就自动播放
五、黑屏问题。
-- 开始播放时,有一段黑屏时间,不能无缝衔接
六、其他属性和方法。
-- 喜欢一个技术,就要了解“她”的全部,这些你也看看呗
一、video 标签内联播放
Video 标签内联播放,需要添加属性:
webkit-playsinline="true" playsinline=“true”
通过上述代码可以达到苹果手机非全屏(内联)播放的效果,安卓上退出全屏后也可以通过底部的播放按钮非全屏播放。
而在 iphone上 默认是全屏播放的。
需要在 Obj-C 里,webview设置allowsInlineMediaPlayback属性为YES
webview.allowsInlineMediaPlayback = YES;这个需要客户端的同学注意一下。
iOS 10 之前的版本支持 webkit-playsinline,但是加了这个属性后,在 iOS 9 上出现只能听到声音不能看到画面的问题。
为了 兼容ios8、9 需要再加上这个库 iphone-inline-video 一起使用。
[https://github.com/bfred-it/iphone-inline-video]
这里补充一下 iphone-inline-video 使用方法:
1.npm install --save iphone-inline-video
2.使用
iphone-inline-video在iOS 10上会自动禁用。
确保你使用这个playsinline属性。
二、播放视频去控件
实现上图效果,可添加CSS:
此方法仅适用于 非全屏下去掉控件。
三、去控件全屏播放
实现去控件全屏播放步骤:
1、全屏实现:将video视频宽高设置为 100% (全屏)
2、去控件参照上面说的第二步
当然,如果想要实现真正的全屏(顶部的导航消失),针对x5内核的可以使用 同层播放器。
新版的 TBS 内核(>=036849)支持同层播放器的视频播放器,且不需要申请白名单。
只需给 video 设置两个属性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true",播放效果自然服帖,效果如上图。
四、视频自动播放
设置属性 autoplay
But , Android始终不能自动播放,需要手动调用:
开发中,遇到一个问题,在微信中始终无法实现自动播放,因为IOS和微信都是要求用户有操作后才能自动播放影音视频。
这里,找到了一个hack方法:
微信中,可以监听 WeixinJSBridgeReady 事件,来实现视频的自动播放
五、黑屏问题
ios 在播放视频时,会出现短暂的黑屏(透屏),再正常显示。
为了避免不正常显示,我们可以这样做:
在视频上层覆盖一个 使用视频第一帧的图片填充的“div 块”,制造播放假象。然后监听事件 timeupdate ,视频播放有画面时移除这个“div块”
六、常用属性和事件
video 支持的属性和事件很多,但在有些属性和事件在不同的系统上跟预想的表现不一致,在尝试比较之后,以下基本可以满足需求:
1、autoplay 属性
<video autoplay="true" />
设置此属性,视频将自动播放。
2、preload 属性
<video preload="auto” />
规定是否预加载视频。
可能的值:
* auto - 当页面加载后载入整个视频
* meta - 当页面加载后只载入元数据
* none - 当页面加载后不载入视频
如果设置了 autoplay 属性,则忽略该属性。
3、timeupdate 事件
监听音频/视频(audio/video)的播放位置发生改变时触发。通常与 video.currentTime 一同使用
4、ended 事件
监听视频播放结束
后记:
网上关于video介绍的文章也挺多,通过搜集和自己的开发经验,这里整理了一些问题:
因为视频是一边播放一边加载,因此不但视频的大小会影响加载体验,视频的清晰度对加载体验影响更大。
建议视频1S平均大小范围控制在0.09~0.17M
视频格式建议使用mp4
如果 在android 环境中,想要隐藏 video 播放器,style属性 这样写:{ position: relative; display: none; z-index: -1; }
如果你喜欢我们的文章,关注我们的公众号和我们互动吧。
如何制作一个完美的全屏视频H5的更多相关文章
- HTML5轻松实现全屏视频背景
想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...
- QT for android 比较完美解决 全屏问题
项目用到QT qml,需要在android下面全屏显示,折腾了一晚上,搞定,分享下,希望能帮助他人. 参考 Qt on Android:让 Qt Widgets 和 Qt Quick 应用全屏显示 该 ...
- IOS写一个能够支持全屏的WebView
这样来写布局 一个TitleView作为顶部搜索栏: @implementation TitleView - (id)initWithFrame:(CGRect)frame { self = [sup ...
- 【wpf基础】wpf MediaElement全屏播放视频功能
最近在研究如何将视频全屏播放,一开始思路A:弹窗将MediaElement对象add到一个新的全屏窗体,报错 指定的元素已经是另一个元素的逻辑子元素.请先将其断开连接. 后续转换思路B:将本窗体其他控 ...
- WebView中的视频全屏的相关操作
近期工作中,基本一直在用WebView,今天就把它整理下: WebView 顾名思义,就是放一个网页,一个看起来十分简单,可是用起来不是那么简单的控件. 首先你肯定要定义,初始化一个webview,事 ...
- Android WebView 总结 —— 使用HTML5播放视频及全屏方案
在APP开发的过程中,会碰到需要在WebView中播放视频的需求,下面讲解一下如何在WebView中使用html5播放视频. 1.让视频在各个Android版本能够正常播放 在AndroidManif ...
- jquery序列帧播放(支持视频自动播放和不是全屏播放)
jquery序列帧播放 这个弊端就是到时候需要升级下带宽 至少10MB 保证不卡.. ae导出序列真的时候 每秒10帧 就是代码每秒播放10张图片 尺寸适当的可以压小点<pre> < ...
- HTML5新标签video在iOS上默认全屏播放
今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...
- html-----vedio标签(HTML5新标签VIDEO在IOS上默认全屏播放)
今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...
随机推荐
- js 排序:sort()方法、冒泡排序、二分法排序。
js中的排序,这里介绍三种,sort()方法.冒泡排序.二分法排序. 1.sort方法 写法: 数组.sort(); 返回排好序的数组,如果数组里是数字,则由小到大,如果是字符串,就按照第一个字符的 ...
- nodejs中exports与module.exports的区别详细介绍
如果模块是一个特定的类型就用Module.exports.如果模块是一个典型的"实例化对象"就用exports. exports.name = function() { conso ...
- 【webpack整理】一、安装、配置、按需加载
如果你: 是前端热爱者 :) 有JavaScript/nodejs基础 会使用一些常用命令行,mkdir,cd,etc. 会使用npm 想对webpack有更深的认识,或许此时你恰好遇到关于webpa ...
- 学习maven的各种问题
1. The container 'Maven Dependencies' references non existing library 解决方法,将eclipse中maven插件中“resolve ...
- PHPCMS V9里加入JS时生成首页出错
有次在首页中加入JS,确认JS没有问题,但是在后台生成首页的时候一直出错. 查了半天才发现原来是JS里的“{}”问题,V9里调用内容也是用的大括号,冲突了. 解决方法是在“{”前面和后面分别加一个空格 ...
- mysql数据与Hadoop之间导入导出之Sqoop实例
前面介绍了sqoop1.4.6的 如何将mysql数据导入Hadoop之Sqoop安装,下面就介绍两者间的数据互通的简单使用命令. 显示mysql数据库的信息,一般sqoop安装测试用 sqoop l ...
- curl通过调用WebService查询当前天气
<?php /** * curl通过调用WebService查询北京的当前天气 */ header("Content-type: text/html; charset=utf-8&qu ...
- require.js详解
一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染 ...
- 15个必须知道的 Chrome 开发技巧
在 Web 开发者中,Chrome 是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用 console 和 d ...
- NPOI 表头、页眉页脚重复设置
NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 ...