移动端H5的Video标签无法播放在线视频的问题

最新推荐文章于 2024-08-12 17:01:36 发布
最新推荐文章于 2024-08-12 17:01:36 发布
阅读量3.1w 收藏 5
点赞数 2
分类专栏： Android 前端开发 文章标签： android ios 视频 h5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GISuuser/article/details/78204328
版权

在做一个视频项目时，在android和ios使用video标签播放视频，均失败。代码如下：

 <video id="newVideo" src="http://demovideo.csic-hiway.cn/e36a0580883e478d99c0360263bab668/5dfb94cbc0524d4da795070c41bb7728-5287d2089db37e62345123a1be272f8b.mp4"></video>

最后经过长时间测试终于解决 

       <video  controls="controls">
        <source src="http://demovideo.csic-hiway.cn/e36a0580883e478d99c0360263bab668/5dfb94cbc0524d4da795070c41bb7728-5287d2089db37e62345123a1be272f8b.mp4" type="video/mp4" />
        你的浏览器不支持H5播放器
    </video>
这样之后，在ios和android都可以播放了

GIS开发者
关注
专栏目录
android h5视频全屏,WebView篇——实现H5 Video标签视频全屏播放
weixin_42301008的博客
05-27 3237
Android原生API提供了WebView来加载H5网页，H5网页中可能使用Video标签实现视频播放，正常播放比较好实现，但是一般来说视频都会要求全屏播放，这怎么弄呢？下面就来实现一下。整体思路：点击Video标签全屏播放按钮时，会回调WebChromeClient的onShowCustomView()方法，退出全屏时会回调onHideCustomView()方法，所以思路就来了，onShow...
移动端H5视频video开发兼容性总结
peade的博客
07-01 1358
在开发移动端视频video时，存在两个兼容性问题： 视频播放时全屏 视频播放时层级最高 视频播放时全屏 移动端浏览器在播放时，默认是全屏播放。改为内联播放方式为： ele.setAttribute('playsinline', props.options.playsinline); ele.setAttribute( 'webkit-playsinline', props.options.playsinline); ele.setAttribute('x5-video-player-type', 'h
使用＜video＞播放视频
weixin_44487537的博客
01-08 871
【代码】使用＜video＞播放视频。
一个移动端H5Video标签播放视频的实现
08-11
一个移动端 H5 Video 标签播放视频的实现
H5 如何解决移动端适配问题
最新发布
liu3325262991的博客
08-12 272
通过使⽤ flexible 布局⽅案，将 px 转化为 rem 单位，并且动态计算根节点的字体⼤⼩，以适配不同的。通过设置 viewport 标签的 meta 属性，来控制⻚⾯的缩放⽐例和宽度，以适配不同的设备。通过将 px 转化为 rem 单位，根据不同的设备字体⼤⼩设置不同的样式，以适配不同的设备。通过 CSS3 的媒体查询，根据不同的设备宽度设置不同的样式，以适配不同的设备。会在⻚⾯加载时动态计算根节点的字体⼤⼩，并将 px 转化为 rem 单位。表⽰将⽹⻚的基准字体⼤⼩设置为 16px，
H5网页中的video标签不能自动播放并且play或者click播放按钮无效的原因及解决办法
先飞网校
02-05 2712
于是，获取video标签，然后静音：video.muted=true;然后再播放：video.play()获取按钮和video都是可以的，但是无法进行下一步，除非有互动动作，比如点击一下页面任意位置。2、用js获取video标签，play。1、用js获取播放按钮，click；
h5移动端视频自动播放
高先生的猫
12-11 4473
在移动端使用h5自动的video标签播放视频，设置autoplay属性，在android端部分不支持，全屏播放还存在层级问题，ios10以上版本支持视频自动播放，以下版本不支视频自动播放。 jsMpeg是js写的视频、音频解码器，能使用WebGL&Canvas2D渲染以及WebAudio声音输出。 官网：https://jsmpeg.com/ github:https://github.com/phoboslab/jsmpeg 官方例子:https://jsmpeg.com/perf.html
html5 video标签不能播放视频,h5 video 视频不能正常播放
weixin_39872624的博客
06-10 1824
在页面中用video标签嵌入了一个视频：其中 video 的 poster 属性的值和 source 的 src 的值都是存在 json 数组里动态获取的。这个页面用ios自带的浏览器和qq直接打开时，视频都能正常播放，但是在微信打开，视频就无法播放。安卓都能正常播放。以下代码是用于视频播放的：function audioPlay() {var video = document.getElemen...
HTML5添加video视频标签后仍然无法播放的解决方法
爱java
02-02 2571
现象：插入如下代码后仍然无法看视频（注：视频已确认为浏览器支持格式） &lt;video controls="controls" width="500px" height="300px" preload="metadata"&gt;&lt;source src="video/FF4.ogv" type="video/ogg"&a
HTML5的Video标签有部分MP4无法播放的问题解析（多图）
11-21
现在网页视频的应用极为广泛，在实际项目中发现有些MP4文件可以在H5网页中正常播放，但有些却不行，这是为什么呢？ 1、首先我自己从网上下载的一个MP4文件，IE10和谷歌都能正常播放。然后自己用格式化工厂转换了一个...
移动端H5 audio/video 标签遇到的一些问题总结
tianmd_Eric的博客
06-04 2386
写在开头   由于需求的不断完善，最近着手的 移动端 代码中需要加入音效和背景视频，第一反应就是audio，做完demo之后测试发现在 safari 浏览器中没有得到想要的效果，经过查阅资料发现很多前辈都遇见过这个坑，为了总结在这里做个笔记，也说一说我自己的代码中实际的问题和解决办法~ audio标签的问题 主要是safari浏览器中的一些限制； 1.每次只能播放一个音频。 意思就是说我在播放一个音频的时候，不能同时播放另一个音频，代码中没有这种需求，真实性有待考证。 2.不支持 preload 和 aut
h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理(获取当前浏览器做一下逻辑处理)
essnbb的博客
09-08 2034
像h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理
H5端Video无法自动播放
weixin_38079959的博客
09-15 2340
H5视频无法自动播放
ios和安卓手机端使用video标签播放失败的问题
weixin_45935149的博客
12-08 2474
安卓和浏览器适配做得很好，只需要设置好文件类型和，最后返回文件的二进制流即可。但是ios客户端还需要设置文件大小才能正确播放。我只做了MP4格式的视频，其他格式的视频暂时还没有试过，百度看了下，其他视频文件可能会涉及到视频编码的问题。在手机端上播放视频，流量很贵，像我的做法的话都是一次性返回整个文件的二进制流，这样过于暴力，后续优化的时候，可能要设置另外的响应头，进行分段返回。比如响应头中是获取文件的部分内容。分段返回文件二进制流的实现方式。
H5移动端页面使用DPlayer视频播放器
山有木兮木有枝 心悦君兮君不知
04-20 6520
H5播放视频，自定义播放器样式，自定义播放按钮。
微信h5video不能自动播放和不显示问题解决
aaa123aaasqw的博客
07-12 1718
在微信中，由于安全和用户体验的考虑，自动播放视频（尤其是带有声音的视频）受到了严格的限制。特别是在iOS设备上，由于操作系统的限制，视频通常不能自动播放，除非它们被设置为静音（请注意，这仅适用于iOS设备上的Safari浏览器（包括微信内置的X5浏览器），并且需要用户之前与页面有过交互（如点击或触摸页面上的某个元素）。然而，在Android设备上，微信的X5浏览器可能会稍微宽松一些，但仍然不建议依赖自动播放功能，因为用户的浏览器设置和微信版本可能会影响这一行为。）且用户之前与页面有过交互（如点击或触摸）。
掌握HTML5中的多媒体--视频(video)
huobengluantiao8
08-06 449
除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。 下面 Figure 1的示例展示了HTML5中video标签与传统的object标签的不同. Figure 1 1. &lt;section&gt; 2. &lt;h1&gt;使用HTML5的video标签播放视频&lt;/h1&gt; 3. &lt;vi...
H5/微信 Video标签移动端播放问题
qq_17627195的博客
03-15 1859
里面的自动播放只能用于IOS，不能用于安卓（目前来说）这个参数不能用，用了的话安卓就失效了。
html5 viedo视频标签在手机上无法正常播放解决方法
querystringcom的专栏
05-31 9576
为使用HTML5 viedo 标签无正常播放视频呢？ 原因是IIS的MIME中未注册MP4、ogg、webm相关类型，导致IIS无法识别 1、在IIS中双击MIME类型的图标 2、右键-》添加 IIS不认识的新类型 3、添加新类型的扩展名和类型标识 比如： 扩展名填写 .mp4 , MIME类型填写 viedo/mp4  .ogv  viedo/ogg .w
移动端h5在线预览文件
05-02
移动端H5在线预览文件是指使用H5技术在移动设备上实现在线查看各种格式的文档。这种技术在现代化的企业管理中扮演着重要角色。 在移动端使用H5技术进行文件预览可以大大提高效率，方便快捷。用户不用下载文件就能够实时浏览，并且能够提供一系列的交互操作，如放大、缩小、翻页、搜索等功能，极大的提高了用户使用的便捷性。 移动端H5在线预览文件的好处包括但不限于以下几个方面： 1. 调用方便 移动端H5在线预览文件能够非常方便地调用许多文件类型，例如文档、PDF、图片、PPT、视频等多种格式，只需调用相应的插件就可以实现在线预览。 2. 适应性强 移动端H5在线预览文件可以适应多种设备，如手机、平板、PC等多种场景，同时自适应不同的屏幕和分辨率，满足了用户不同的需求。 3. 方便用户使用 移动端H5在线预览文件提供丰富的互动功能，用户可以通过点击、拖拽、旋转等操作实现更加灵活的交互体验，方便快捷。 总之，移动端H5在线预览文件是一个发展迅速的趋势，它使用户能够随时随地的查看文件，提高了工作效率和生活便利性。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS开发者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值