视频播放—— H5同层播放器接入规范

H5同层播放器接入规范

x5-video-player-type 启用H5同层播放器

通过video属性“x5-video-player-type”声明启用同层H5播放器

x5-video-player-type支持的值类型:h5

示例:

<video src="http://xxx.mp4" x5-video-player-type="h5"/>

注: 这个属性需要在播放前设置好,播放之后设置无效,下面的’x5-video-player-fullscreen’也是一样

x5-video-player-fullscreen全屏方式

视频播放时将会进入到全屏模式

如果不申明此属性,页面得到视口区域为原始视口大小(视频未播放前),比如在微信里,会有一个常驻的标题栏,如果不声明此属性,这个标题栏高度不会给页面,播放时会平均分为两块(上下黑块)

注: 声明此属性,需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

需要监听窗口大小变化(resize)实现全屏

window.onresize = function(){

test_video.style.width = window.innerWidth + "px";

test_video.style.height = window.innerHeight + "px";

}

注: : 1. 为了让视频真正铺满全屏,可以适当让video的显示区域大于视口区域,这样在显示时在视口外的部截掉后,不会出四周黑边的情况

x5-video-orientation 控制横竖屏

功能:声明播放器支持的方向

可选值: landscape 横屏, portraint竖屏

默认值:portraint

e.g: http://res.imtt.qq.com/qqbrowser/js/test_video_orientation_attr.html

横屏

<video ... x5-video-player-type=”h5” x5-video-orientation="landscape"/>

竖屏

<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>

跟随手机自动旋转

<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>

注: 此属性只在声明了x5-video-player-type=”h5”情况下生效

事件回调

x5videoenterfullscreen进入全屏通知

支持版本: TBS中从>=036900开始支持,QB中是>=7.2开始支持

x5videoenterfullscreen: 表示播放器进入全屏状态

示例:

<video id=“myVideo".../>

通过JS监听事件

myVideo.addEventListener("x5videoenterfullscreen", function(){

alert("player enterfullscreen");

})

x5videoexitfullscreen退出全屏通知

x5videoexitfullscreen: 表示播放器退出了全屏状态

使用方法与x5videoenterfullscreen类似

使用同层播放器的一些建议

1. 监听resize 事件实现自适应视口大小变化,视频播放时会调整视口大小

2. 在视频播放期间的交互,弹框,字幕在视频视频区域中,不要在视频区域外

3. 对于直播类全屏视频,最好不要在最顶部放交互性元素

交互性视频实现建议

允许视频区域(video元素)之上的操作

1. 对于需要全屏交互的,可以将video区域设置为视口大小>

同层播放器支持版本

TBS微信:

TBS内核>=036849 后开始支持

UA示例:

Mozilla/5.0 (Linux? Android 4.4.4? OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML,like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN

TBS手Q:

TBS内核>= 036855

Android QQ浏览器:

浏览器版本>=7.1

UA示例:

UserAgent: Mozilla/5.0 (Linux? U? Android 4.4.4? zhcn? OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

视频显示位置控制

默认视频在指定区域的居中显示,可以通过css object-position 属性控制视频(左上角) 显示位置

示例: http://res.imtt.qq.com/qqbrowser/js/testx5videoplayertype.html

置顶:

myVideo.style["object-position"]= "0px 0px"

效果图:

底部显示:

var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)

myVideo.style["object-position"]= "0px " + offsetY + "px"

效果:

Q&A

Q:如何安装新版tbs?

A:请使用微信扫描以下二维码,扫描后将会自动进行安装,无需其他操作。

Q: 如果要在QQ浏览器里测试,如何安装新版本QQ浏览器

Q:如何测试效果,确定进入了同层播放器?

A:安装新的tbs版本后,如果要测试效果,请杀掉微信进程,把系统时间往后调一天以上,再进入网页进行视频播放,如果微信的顶bar消失,进入了一个沉浸式的播放器,则是进了同层播放器。

Q:如何查看当前的的tbs版本?

A:在微信聊天窗口输入//gettbs 并发送,查看弹出的Toast上显示的tbsCoreVersion 是否等于36849 ,若是则tbs版本正确。注:这是之后进行测试的基础,这个版本一定要正确

Q:接入了同层播放器,在老版本的tbs是否会出问题?

A:对老版本不会产生影响。

Q:同层播放器在iOS上会生效吗?

A:目前的同层播放器只在Android(包括微信)上生效,暂时不支持iOS

Q:同层播放器顶部”<”和“…”按钮可以去掉吗?

A:不能

Q: 在微信TBS里如何区是否支持同层播放器

A: a)在微信等TBS里通过UA判断X5内核版本来区分,当版版本号>036849表示支持

UA示例:

Mozilla/5.0 (Linux? Android 4.4.4? OPPO R7 Build/KTU84P) AppleWebKit/537.36(KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN

b)在QQ浏览器Android版本中,当浏览器版本>=7.1时开始支持

UA示例:

UserAgent: Mozilla/5.0 (Linux. U. Android 4.4.4. zhcn. OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

时间: 2024-11-05 18:42:29

视频播放—— H5同层播放器接入规范的相关文章

H5音乐播放器

前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" class="music"> <div id="lyric_div"> <div id="lyric_tit"></div> <div id="lyric_con"> <d

h5自定义播放器得实现原理

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--插入播放按钮得文字图标格式(具体使用方法可以百度http://fontawesome.dashgame.com/)--> 7 <link rel="stylesheet&

基于我们3组的网易云APP制作,找的APlayer H5音乐播放器

APlayer是一个非常漂亮的HTML5音频播放器,UI参考自网易云音乐外链播放器.它将audio标签封装,并结合CSS制作出漂亮的播放器UI,它支持设置歌名.歌手和歌词,可以设置是否自动播放,支持缩略图,支持播放进度以及设置播放源. HTML 首先是要加载播放器样式文件,这个播放器的样式酷似网易云音乐播放器.接着载入APlayer.js文件.然后在body中加入播放器div#player1,用于显示播放.<link rel="stylesheet" href="APl

集RTMP、HLS、FLV,、WebSocket 于一身的网页直播/点播播放器方案EasyPlayer.js视频播放界面快照和拉伸按钮显示多个的处理流程

背景分析 EasyPlayer几乎涵盖了开发者所需的全部平台,尤其是在web端的EasyPlayer.js,极大地方便了开发者在解决B/S型业务开发时遇到的播放器接入的问题,比如:不懂前端的js代码.没有公网服务器放置这些js脚本和网页.微信对接入IP播放地址有限制等. EasyPlayer.js适时地推出了一款非常优秀的工具页面,集 rtmp, hls, flv, websocket 于一身的网页直播/点播播放器, 使用简单, 功能强大,不论是测试,还是被集成,都很方便. 支持m3u8播放;

4个小时实现一个HTML5音乐播放器

技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐播放器就要非常了解在Web中音频播放的方式,通常都采用HTML5的audio标签关于audio标签,它有大量的属性.方法和事件,在这里我就做一个大致的介绍. 属性:src:必需,音频来源:controls:常见,设置后显示浏览器默认的audio控制面板,不设置默认隐藏audio标签:autoplay

一步一步实战HTML音乐播放器

在这里我用HTML5从头开始一步一步来制作一个简约的音乐播放器,大家可以参考一下,接下来正式开始. 音乐播放器效果 播放器分析 这里将播放器分两块来做: 视图层(html + css) 逻辑层 ( js ) 视图层分析 视图中包含: 播放器容器 播放器名称 音乐专辑图 音乐信息 歌曲名 歌手 专辑名 控制区 上一曲 播放 下一曲 播放进度条 播放时间 当前时间 歌曲总时间 音频控件 页面背景 逻辑层分析 逻辑层处理包括: 加载歌单 渲染歌曲信息 专辑图 歌曲名 歌手 专辑名 歌曲时长 歌曲音频地

Html5之高级-4 HTML5视频处理(H5中播放视频、编程实现视频播放器)

一.在 HTML5 中播放视频 在 HTML5 中播放视频 - HTML5 中提到最多的是视频处理,视频也是互联网中的重要应用.在HTML5中,增加了一个元素,以便在HTML文档中插入和播放视频,这个元素就是video元素 - video元素提供了播放.暂停和音量控件来控制视频,也提供了width和height属性控制视频的尺寸.如设置的高度和宽度等. - 使用video元素至少要提供两种视频格式的文件: OGG和MP4 - OGG: 包含Theora 视频和 Vorbis 音频解码器 - MP

如何利用阿里视频云开源组件,快速自定义你的H5播放器?

摘要: Aliplayer希望提供一种方便.简单.灵活的机制,让客户能够扩展播放器的功能,并且Aliplayer提供一些组件的基本实现,用户可以基于这些开源的组件实现个性化功能,比如自定义UI和自己App server的交互等等,而不用从头开始开发一些功能,节省时间和精力. 阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载.首屏秒开.低延时等业务场

H5播放器

自定义视频播放器的最好办法就是,隐藏掉原生播放器,把图像输出到canvas上面,然后再在周边加上一系列的控件,控件通过H5的API来控制源,源被控制了,Canvas上的图像也就被控制了. 自定义音频播放器的最好办法原理基本如上,有时间我要写个牛逼的播放器. 测试Demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport&quo