在前面的话:
最近一波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介绍的文章也挺多,通过搜集和自己的开发经验,这里整理了一些问题:
参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
https://x5.tencent.com/tbs/guide/video.html
作者:大转转 - 张颖
来源:微信公众号:大转转FE
出处:https://mp.weixin.qq.com/s/Bz8Ra1coFirSnwsqacifVw
务8:全屏模式的切换。
这张就是第八,第八小姐就是讲关于全屏模式的切换。回到页面,希望有个按钮,一点全屏娱乐模式,这一点就切换回来。可能我个人不太喜欢这种模式,但有的人会用,还是把它设计进去。
然后就在这个地方加一个图标,有空再找一下。找了一个图标,就找这个。jump through screen one,这有了吗?有了,还挺好。然后就稍小了一点,再给它大一点,size,就不要说是二十,可以。点它,现在没效果,来做这个效果。
首先给它定一个变量叫is war screen,是不是全屏的?它肯定是响应数据了,i e f,它不是默认,当然响应数据这边可以给它添类型,比如它是birch,填birch。如果它不是,还找一个相对的,跟它相反的按钮,收回来的按钮,就用这个。
off for screen one,就这个,给它来复制一下,把它放松,就是衣服regan in the first three,如果它真的,就显示上面的,否则就显示下面的。来看一下,这边有一个方法,就这样可以,可能还做其他的,记得就给它定一个top切换螺丝功能,它是一个,然后再调整这个方法就行了。
就要投screen,点,没效果,为啥没效果?是不是点错了?这边点这上面,再说下面一个,放到枪上,点,看有切换效果了。怎么样给它切换?这个是节食里面固定的方法,如果它的值,直接给它切换,就是document,the element,点a request,press greet plug,就是全屏切换。
这里切换了,这点没效果只按a xe,所以这边也不对,所以希望它变成这个时候就把它缩回来,这边就要做一个判断了,就是来判断它是不是已经缩放了,如果它已经是展开了,就把它缩回来,也是,这个就退出,否则就把它删远,就简单的删远,删除就可以了。
试一下,点,点,回来了,点,点,再配合原来的一点,就全屏显示了,舒服了,点回来。这一章就讲完了,就把页面布局都弄好了,包括动态生成菜单页,浏览历史页,面包穴导航,把整个布局就全做好了。
下一张开始做具体业务了,首先叫做用户的登录,注册新用户,还有一个重置密码。这节课就讲到这里,拜拜。
么是全屏布局
全屏布局就是指 HTML 页面铺满整个浏览器窗口, 并且没有滚动条。而且还可以跟随浏览器的大小变化而变化。
*请认真填写需求信息,我们会在24小时内与您取得联系。