关于HTML5中Video标签播放问题
PS:官网首页视频IOS与安卓都可播放代码:
<video width="100%" height="auto" type="video/mp4" controls="controls" class="adVideo" id="adVideo"></video>
1、视频文件问题 :考虑代码没问题情况下,如IOS视频还是播放不了,可能是视频问题 ,视频压缩太狠或视频编码选不对都会导致播放只有声,没图像的问题;
2、video 标签在微信浏览器的问题解决方法
最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题:
- 在微信浏览器内播放时,视频会自动全屏
- 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设置高度,视频的容器在安卓手机上会被视频的封面撑大到变形
解决办法:
给video标签加一些属性,调用h5原生video,我写了个例子,加了注释,如果有错误,烦指正,谢谢!
<video class="video-source"
width="100%" height="240px" /*如果有封面,请设置高度*/ controls /*这个属性规定浏览器为该视频提供播放控件*/
style="object-fit:fill" /*加这个style会让 Android / web 的视频在微信里的视频全屏,如果是在手机上预览,会让视频的封面同视频一样大小*/
webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/
x-webkit-airplay="true" /*这个属性还不知道作用*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
x5-video-orientation="h5" /*播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
x5-video-player-fullscreen="true" /*全屏设置,设置为 true 是防止横屏*/
preload="auto" /*这个属性规定页面加载完成后载入视频*/
</video>
如果你的video标签也加了上面的属性,那么,你的视频可以在IOS手机上的小窗口播放,同时,视频封面同视频的宽度与高度也保持一致了。
经过各种尝试,在iOS下,可以给video添加webkit-playsinline属性,使视频在页面上原本位置播放,但这个属性在安卓上无效。
代码参考:
<video src="data:images/video1.mp4" id="video-obj1" class="video-obj" controls="controls" x-webkit-airplay="true" webkit-playsinline="true" playsinline></video>
添加 x-webkit-airplay="true" webkit-playsinline="true" playsinline 三个属性
注意:此方法在部分安卓手机微信端无法实现效果,因为是微信内核问题,并且微信会把播放的视频的层级设置为最高,所以会存在视频返回后视频遮住页面问题,
解决方法:监听视频暂停事件 pause,暂停后将视频元素隐藏,写一个视频封面图,点击封面图进行视频显示和播放
$("#video").addEventListener("pause",function(){
$(".video1").hide();
})
-------------------------------------
相关参考:https://www.cnblogs.com/baiyygynui/p/6323565.html
关于HTML5中Video标签播放问题的更多相关文章
- 解决html5中video标签无法播放mp4问题的办法
这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...
- 在使用html5的video标签播放视频时为何只有声音却没有图像
在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...
- 关于HTML5中Video标签无法播放mp4的解决办法
1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...
- mp4 格式无法使用html5的video标签播放
只有视频编码为h264的视频才能在html5中使用video标签播放 我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px;
- 关于HTML5中video标签的奇怪现象
很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html&g ...
- HTML5中video标签与canvas绘图的使用
video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang=&quo ...
- 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
- html5 中video标签属性
<video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.j ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
随机推荐
- Pycharm介绍下载指南
Pycharm的基本介绍 PyCharm是一种Python IDE是可以帮助用户在使用Python语言开发时提高其效率的开发工具. Pycharm的官网:https://www.jetbrains.c ...
- pandas中loc和iloc的使用细节
1.缘由 前段时间在使用pandas库中的索引和切片的时候,突然就感觉有点懵,赋值和索引的操作总是报错. 网上的很多资料讲的也非常的浅显,而且使用起来非常不顺手. 于是我就找到很多的网上资料,然后自己 ...
- js的基本数据类型和引用数据类型及深拷贝浅拷贝
1.栈(stack)和堆(heap) stack为自动分配的内存空间,它由系统自动释放:而heap则是动态分配的内存,大小也不一定会自动释放 2.js数据类型分两种 (1)基本数据类型(值类型):Nu ...
- TypeScript 前端工程最佳实践
作者:王春雨 前言 随着前端工程化的快速发展, TypeScript 变得越来越受欢迎,它已经成为前端开发人员必备技能. TypeScript 最初是由微软开发并开源的一种编程语言,自2012年10月 ...
- CVE-2022-26923 Windows域提权漏洞
前言 Active Directory 域服务,是一种目录服务,提供了存储目录数据信息以及用户相关的一些密码,电话号码等等一些数据信息,且可让用户和管理员使用这些数据,有利于域管理员对用户的数据信息进 ...
- 你的 GitHub 年度报告「GitHub 热点速览 v.22.52」
辞旧迎新的日子,又是年度报告满天飞的时候.GitHub 也不落其他平台之后,推出了用户 GitHub Contributions 报告.不知道,今年的你是不是比去年搬了更多的砖呢?在本期的 News ...
- Vue 修改对象(数组)没有立即生效
在写项目时遇到了给数组赋值后,出现赋值延时的问题,解决办法如下 // Vue 不能检测以下变动的数组: // 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = ne ...
- 使用Python库pyqt5制作TXT阅读器(一)-------UI设计
项目地址:https://github.com/pikeduo/TXTReader PyQt5中文手册:https://maicss.gitbook.io/pyqt-chinese-tutoral/p ...
- ArcGIS工具 - 按字段分割图层
天下大势,合久必分,分久必合.合并.分割在GIS数据处理和管理中也十分常见,例如按行政区划名称导出多个区县行政图层.按地类名称导出多个地类图层. 功能说明 其实,在ArcGIS中除了按属性导出外,最接 ...
- 《Effective C++》构造、析构、赋值运算
Item 05:了解C++默默编写并调用了哪些函数 总结:编译器可以暗自为class创建default 构造函数.copy构造函数.copy assignment操作符,以及析构函数. (这一小节比较 ...