如何制作一个完美的全屏视频H5
写在前面的话:
最近一波H5广告火爆整个互联网圈,身为圈内人,我们怎能 不! 知!道!
:( 嘘!真不知道的也继续看下去,有收获 ↓ )
So,搞懂这个并不难。
这篇文章将带你从头到尾了解H5广告的实现。
本文主要讲一下几个关键点
一、视频内联播放。
-- 想要营造一种文字与视频混排的现象,视频不要影响其他模块
二、视频去控件。
-- 交互视频,不能点击快/慢进或暂停哦
三、去控件全屏播放。
-- 想要模拟 明星给我打电话的体验,不能看到明显的视频播放器
四、视频自动播放。
-- 想要释放用户操作,打开链接就自动播放
五、黑屏问题。
-- 开始播放时,有一段黑屏时间,不能无缝衔接
六、其他属性和方法。
-- 喜欢一个技术,就要了解“她”的全部,这些你也看看呗
一、video 标签内联播放
Video 标签内联播放,需要添加属性:
webkit-playsinline="true" playsinline=“true”
通过上述代码可以达到苹果手机非全屏(内联)播放的效果,安卓上退出全屏后也可以通过底部的播放按钮非全屏播放。
而在 iphone上 默认是全屏播放的。
需要在 Obj-C 里,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; }
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
https://x5.tencent.com/tbs/guide/video.html
如何制作一个完美的全屏视频H5相关推荐
- textureview 缩放_用MediaPlayer+TextureView封装一个完美实现全屏、小窗口的视频播放器...
原标题:用MediaPlayer+TextureView封装一个完美实现全屏.小窗口的视频播放器 本文作者 本文由xiaoyanger授权发布. xiaoyanger的博客地址: http://www ...
- android 播放器封装,Android视频播放最全总结:MediaPlayer+TextureView封装一个完美实现全屏、小窗视频播放器,附项目源码...
原标题:Android视频播放最全总结:MediaPlayer+TextureView封装一个完美实现全屏.小窗视频播放器,附项目源码 作者:xiaoyanger 来源:http://www.jian ...
- 屏幕测试图片全屏_全屏视频测试
屏幕测试图片全屏 只需记录一些全屏视频技术以及jQuery UI对话框窗口即可 . 我已经在演示中嵌入了YouTube视频,但是您可以嵌入任何视频. 在GitHub上 查看演示 查看项目 正在检查浏览 ...
- Android的WebView如何播放视频和全屏视频(腾讯X5内核)
WebView如何播放视频和全屏视频 前言 1. 接入SDK 2. 具体场景和代码实现 3. 踩坑 3.1 android.system.ErrnoException: chmod failed: E ...
- MediaPlayer+TextureView,完美切换全屏、小窗口的 Android 视频播放器
NiceVieoPlayer 项目地址:xiaoyanger0825/NiceVieoPlayer 简介:MediaPlayer+TextureView,完美切换全屏.小窗口的 Android 视频 ...
- HTML5轻松实现全屏视频背景
想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...
- 解决uniapp退出全屏视频字体变大的bug
1.退出全屏视频时跳转到一个空页面 2.在空页面onshow上立即跳转回原来的页面就可以 爱你哟 onshow:function(){ uni.navigateTo{ url:'' } }
- htmlcss全屏视频背景
在来练习一个全屏视频背景的项目: 代码如下: <!DOCTYPE html> <html> <head><meta charset="utf-8&q ...
- 原生JS实现全屏视频背景滚动淡出
给大家分享一个用原生JS实现全屏视频背景滚动淡出,效果如下 : 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&qu ...
最新文章
- Android中出现内存泄露的原因
- 面向对象模型的四种核心技术
- 史上第二走心的 iOS11-Drag Drop 教程
- ASP.NET CORE系列【一】搭建ASP.NET CORE项目
- Tomcat开启SSL协议支持
- VUE从零开始系列(路由钩子及插件开发),呆萌小白上手VUE
- matplotlib绘图入门详解
- iis 不是 php,iis是不是默认支持php
- linux显卡烤机操作,显卡拷机必备:FurMark时隔一年全新升级
- ABP前端使用阿里云angular2 UI框架NG-ZORRO分享
- transform再次理解
- 没车牌也能开上国产特斯拉:北京3年租赁每月1万1,全国最低7千
- paip..net 程序多语言切换开发的流程总结
- mathml解析引擎MathPlayer的缺陷
- 阴阳师服务器在维护,《阴阳师》12月1日服务器维护公告
- 喜讯 雨笋教育优秀学员荣获望城区网络安全攻防演练二等奖
- 河南联通网通封杀路由器解决办法
- 六款在线项目管理工具
- pinpoint监控学习笔记
- 解决类别不平衡问题的方法综述