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标签播放问题的更多相关文章

  1. 解决html5中video标签无法播放mp4问题的办法

    这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...

  2. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  3. 关于HTML5中Video标签无法播放mp4的解决办法

    1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...

  4. mp4 格式无法使用html5的video标签播放

     只有视频编码为h264的视频才能在html5中使用video标签播放 我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px;

  5. 关于HTML5中video标签的奇怪现象

    很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html&g ...

  6. HTML5中video标签与canvas绘图的使用

    video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang=&quo ...

  7. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  8. html5 中video标签属性

      <video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.j ...

  9. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  10. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

随机推荐

  1. 使用JsonConverter处理上传文件的路径

    场景 我们上传一个文件,把文件保存到服务器上,会有一个明确的物理路径,由于需要从前端访问这个文件,还需要web服务器中的一个虚拟路径.这个虚拟路径的存储会有一个问题,我们应该在数据库里存什么?是带域名 ...

  2. 详解JAVA线程问题诊断工具Thread Dump

    摘要:Thread Dump是非常有用的诊断Java应用问题的工具. 本文分享自华为云社区<调试排错 - Java 线程分析之线程Dump分析>,作者:龙哥手记. Thread Dump是 ...

  3. IT编程相关内容汇总 - 进阶者系列 - 学习者系列文章

    笔者工作了十多年了,对于技术也有一定的经验,但是IT编程技术的更新是挺快的,特别是各种框架,各种中间件啥的都涌现出来了.这篇博文笔者打算将IT编程的前端.后端.数据库和移动端做一个博文知识汇总,让阅读 ...

  4. 迁移学习(IIMT)——《Improve Unsupervised Domain Adaptation with Mixup Training》

    论文信息 论文标题:Improve Unsupervised Domain Adaptation with Mixup Training论文作者:Shen Yan, Huan Song, Nanxia ...

  5. Java基础篇——IO流

    流 内存和存储设备之间传输数据的通道 流的分类 按方向划分 输入流(读):存储设备→内存 输出流(写):内存→存储设备 按单位划分. 字节流:以字节为单位,可以读写所有数据 字符流:以字符为单位,只能 ...

  6. 一个小而美的 C 语言项目

    我最近在学习 C 语言,看的一本书叫做 <C Primer Plus>,这本书对 C 语言的描写.特性介绍.代码示例都介绍的比较详细,是小白入门 C 语言非常不错的一本书,还有一本经典书叫 ...

  7. CentOS7.6系统安装和网络配置

    CentOS7.6系统安装配置 前言:文章内容可能会因环境不同而有所差异,所谓集思广益说不定灵感就来了呢; 文章初衷旨在交流学习.记录个人成长,如果能帮助到您,那就点个赞噢. 环境说明: 1.本实验使 ...

  8. 自己的devc++的语法配置

    效果如下

  9. [Codeforces Round #794 (Div. 2)] D. Linguistics

    我是什么东西艹艹艹 <我离正解只差个sort> 首先,观察字符串,可以发现:若存在形似\(AA--BB\)或\(BB--AA\)等有两个相同的字符挨在一起的情况,则我们在它们中间放一块隔板 ...

  10. 一看就会的 Anaconda 搭建 OpenCV for Python 环境(全平台通用)

    前言 在学习 OpenCV 的时候,需要搭建 OpenCV 的环境并安装一些库,本文就准备了 OpenCV for Python,换而言之就是 OpenCV 的 python 的 API 接口.它拥有 ...