视屏标签 video 的用法

做项目时遇到了视屏播放不了的问题，现在就做一下记录，后面忘了还能找找（嘻嘻~）

<videoid="video" src="video.mp4" controls = "true"poster="images.jpg" /*视频封面*/preload="auto" webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ x-webkit-airplay="allow" x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/x5-video-orientation="portraint" //播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏style="object-fit:fill">
</video>

属性字段说明：
1、src: 视频的地址
2、controls: 加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
3、poster: 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。
4、preload: 属性规定在页面加载后载入视频。
5、webkit-playsinline和playsinline: 视频播放时局域播放，不脱离文档流。但是这个属性比较特别，需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。
6、x-webkit-airplay=“allow” : 这个属性应该是使此视频支持ios的AirPlay功能。
7、x5-video-player-type: 启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。
8、x5-video-orientation: 声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式
9、x5-video-player-fullscreen:全屏设置。它又两个属性值，ture和false，true支持全屏播放，false不支持全屏播放。其实，IOS 微信浏览器是Chrome的内核，相关的属性都支持，也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核，一些属性标签比如playsinline就不支持，所以始终全屏。

全屏处理

ios ios加playsinline属性，之前只带webkit前缀的在ios10以后，会吊起系统自带播放器，两个属性都加上基本ios端都可以保证内敛到浏览器webview里面了。如果仍有个别版本的ios会吊起播放器，还可以引用一个库iphone-inline-video（具体用法很简单看它github，这里不介绍了，只需加js一句话，css加点），github地址加上playsinline webkit-playsinline这两个属性和这个库基本可以保证ios端没有问题了（不过亲测，只加这两个属性不引入库好像也是ok的，至今没有在ios端微信没有出现问题，如果你要兼容uc或者qq的浏览器建议带上这个库）.
android x5-video-player-type="h5"属性，腾讯x5内核系的android微信和手Q内置浏览器用的浏览器webview的内核，使用这个属性在微信中视频会有不同的表现，会呈现全屏状态，貌似播放控件剥去了，至少加了这个属性后视频上层可以有其他dom元素出现了（非腾讯白名单机制的一种处理措施）。

<video id="video" src="xx.mp4" playsinline webkit-playsinline></video>

去掉video的controls中的下载按钮

video::-internal-media-controls-download-button {display:none;
}video::-webkit-media-controls-enclosure {overflow:hidden;
}video::-webkit-media-controls-panel {width: calc(100% + 30px);
}

视屏标签 video 的用法相关推荐

html五编写视屏_HTML5 video视频字幕的使用和制作
一.video支持视频格式: 以下是三种最常用的格式 1. ogg格式:带有Theora视频编码(免费)+Vorbis音频编码的Ogg文件(免费) 支持的浏览器:firefox.chrome.oper ...
Chromium为视频标签 video 全屏播放的过程分析
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在Chr ...
Chromium为视频标签video全屏播放的过程分析
在Chromium中,<video>标签有全屏和非全屏两种播放模式.在非全屏模式下,<video>标签播放的视频嵌入在网页中显示,也就是视频画面作为网页的一部分显示.在全屏模式 ...
视频标签video属性讲解
<videoid="video" src="video.mp4" controls = "true"poster="imag ...
html5变动标签新写法,Html5新标签解释及用法
Html5新标签解释及用法发布时间:2012-02-17 22:50:45 作者:佚名我要评论 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1. ...
Android 实现视屏播放器、边播边缓存功能，附源码
热文导读 | 点击标题阅读［墙裂推荐］AndroidVideoCache:实现视屏播放边下边播吊炸天!74款APP完整源码! 一份年薪30万的Android面试宝典,附答案来源:http://w ...
hexo+yilia添加相册视屏功能
文章目录一.增加相册功能 1. 原理 2.修改代码 2.1 新建博客的photos页面 2.2 新建本地图片库 2.3 修改`tool.py`中的路径 2.4 每次上传照片都需要运行python脚本 ...
Android 实现视屏播放器、边播边缓存功能、外加铲屎(IJKPlayer)(转载)
转载自:<Android 实现视屏播放器.边播边缓存功能.外加铲屎(IJKPlayer)> hello,大家好,我就是那个会掀桌子的话唠,刚刚结束两篇关于音频播放与录制的文章,旧坑未埋就挖 ...
小程序调用相机、相册、视屏拍摄功能
最近开发小程序,其中涉及聊天板块,这里记录一下小程序如何调用相机.相册.视屏拍摄等功能. 1.相册图片选择或调用相机 chooseImage() {var that = thiswx.chooseIm ...

视屏标签 video 的用法

视屏标签 video 的用法相关推荐

最新文章

热门文章