H5内的视频播放不了或者只有声音没有画面

最新推荐文章于 2023-11-07 09:16:23 发布
最新推荐文章于 2023-11-07 09:16:23 发布
阅读量5.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Android 音视频 Webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Connor__AK/article/details/81162233
本文介绍了一个视频播放的问题案例，由于正式视频文件过大导致上传后无法正常播放。通过使用视频压缩软件并将视频编码格式调整为H264，成功解决了这一问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题

之前测试上传的小视频是可以播放的，又因为正式的视频太大，压缩了一下上传。后来发现视频播放出现问题

 

解决办法

视频压缩软件将视频输入的视频编码格式改为H264 

Vue3 - 最新实现接入集成萤石摄像头详细流程代码，监控摄像头播放直播流视频控制方向上下左右移动/调节音量声音/全屏/截屏录制/SD卡回放/对讲/清晰度（同一页面多个视频播放多个摄像头画面同时推流）
资深程序员
12-19 1万+
vue3，EZVIZ萤石，vue3萤石云摄像头监控，vue3项目集成萤石云详细示例代码，vue3中使用萤石云播放视频，vue3中使用萤石云播放视频，萤石云实现多窗口监控，展示多个监控画面同时播放，云台控制左右移动，Vue3莹石摄像头直播视频，萤石视频回放，摄像头黑屏不显示，加载慢报错出错，多个摄像头宫格布局，vue3萤石云视频监控对接，实现海康萤石直播预览、回放、云台控制功能，如何利用萤石实现直播推流回流，实时监控播放，监控画面清晰度切换，调节声音大小，全屏放大缩小，云存储SD卡录像，回放功能，截屏，录制视
HTML5中的video视频 在谷歌浏览器显示正常，在其他浏览器中不显示的问题？
最新发布
weixin_48596030的博客
07-18 707
HTML5中video视频 在谷歌浏览器正常显示，在360浏览器和edge中出现只显示声音而没有画面的情况
webview 播放H5视频问题 黑屏 只有声音没有画面
weixin_30477797的博客
09-08 1506
android 用webview 播放网络视频怎控制播放按键？ 在代码中加入webview.getSettings().setJavaScriptEnabled(true);//支持jswebview.getSettings().setPluginsEnabled(true);//设置webview支持插件同时要在Manifest配置文件的application中加入 android:h...
H5的video标签在网页上播放MP4视频时只有声音没有画面
weixin_30413739的博客
01-30 1297
最近做一个项目时，发现mp4文件播放时没有图像，只有声音，代码检查了N次，都没有问题，就算是直接使用网上的实例代码，也只能播放实例视频，mp4文件绝对路径，相对路径也都试了，还是不能播放我的mp4. 最后才想到可能是mp4文件本身的问题， 查询了一下 mp4的视频编码有三种：MPEG4(DivX)，MPEG4(Xvid)，AVC(H264) 只有AVC(H264)编码格式的mp4才可以在网...
H5播放器标签video播放mp4格式有声音没有图像解决方法
liukai6的博客
03-01 4132
在使用h5的video标签播放视频很方便,但是有时会出现有声音没有图像的情况,这个时候我们考虑一下视频编码的问题下载转换工具,对视频进行格式的变化,视频编码选择AVC(H264)这样就可以直接播放了,还可以对很多配置进行转换
解决三星等设备video标签播放hls视频时候只有声音没有视频。。。
一名普通码农的菜地
10-21 6717
No Video on HLS Stream Android 4.4.2 Samsung Galaxy S5 up vote1down votefavorite The HLS streams do not play video, but they do play audio. Device inform
H5页面在手机浏览器上无法播放视频或无法切换视频源的解决方案
旷古的寂寞的博客
01-28 1万+
一、视频无法播放问题 最近做了个播放MP4视频的网页，发现PC端能正常播放视频，但是部分手机浏览器，例如UC浏览器，播放视频要么一直转圈加载，要么报-9324,19000错误。 查了很多资料，基本都是说video标签的参数配置不对或者浏览器版本不兼容，没啥用。 最后发现问题出在网络协议上，H5做的页面在部分手机端的浏览器上只能用http或者websocket协议传输视频数据，不能用https协议。 解决方案就是在video标签中使用完整的http视频链接，即使用http前缀的绝对路径。 <
android h5控制锁屏,WebView播放H5课件时，锁屏解锁后，页面重新绘制的问题
weixin_36182029的博客
05-27 805
难题描述：H5页面播放 ，锁屏，解锁后，重新加载了页面，三星不会出现(onpause onstop ,onresume)，但在小米、魅族会调用 onpause onstop ondestroy,onresume为了解决 ，解锁后能呈现和锁屏前一样的页面，寻找了下横竖屏时的生命周期的问题，解决办法就是 阻止横竖屏的切换在Android 2.3平台上，我们可以需要设置界面的横竖屏显示时，可以在Andr...
解决WebView视屏播放问题记录
安妍妍的博客
03-13 4284
情景项目中有一大板块是加载web页面，开始集成了腾讯的X5内核WebView(因为本身集成了视频播放功能，使用起来比较方便)。但是后来前端大神写了一个web页面用到了&lt;canvas&gt;标签，使用X5加载不出来该标签的内容，因为我们设置了webView关闭了硬件加速( webview.setLayerType(View.LAYER_TYPE_SOFTWARE,null))，今日仔细查看了X...
解决h5的video标签，android、pc客户端播放正常，iphone无法播放
xuepuhao的博客
10-25 8820
在做html5时插入一个视频播放标签video后，测试时android、PC客户端播放正常，唯独ios无法播放。 找了很多办法，把视频转换成mp4各种格式；更换了好几个播放器，发现还是行不通。 之前的做法是，请求一个视频链接，然后默认返回一整个视频文件，此时服务端的做法默认为网页请求的是整个文件。而对于safari来说，他不是一次性请求全部文件的（不论osx还是ios），一般首先会请求0-1字...
【HTML】HTML5 video播放有声音无图像的解决方法
九师兄
11-07 6229
如果以上方法都无法解决问题，建议尝试使用不同的视频播放器或者将视频文件转换为不同的格式，看看是否能够正常播放。不同的浏览器支持不同的视频编码格式，如果视频文件使用了不被浏览器支持的编码，可能会导致只有声音没有视频。而且奇怪的是我试过我们300M到1G之间的视频是有问题的，但是300M以下的，或者1G的视频都是没有问题的。如果你的计算机性能较低，可能无法处理较大的视频文件，导致只有声音没有视频。尝试减小视频的分辨率和帧率，或者使用更高效的压缩算法，以减小文件大小。这个我试过，采用不同的浏览器，都不行。
H5 VIDEO标签视频黑屏的原因及解决方法
02-21 1万+
<video style="width:90%;height:300px;" controls="" poster="/upload/image/20200220/1582177396387987.jpg"> <source src="/upload/video/20200220/pin.mp4" type="video/mp4"/> </v...
h5 页面在ios 手机上，有一些video播放不出来，和其他问题汇总
热门推荐
u013018357的博客
06-30 1万+
最近遇到一个奇怪的问题：同一个video，格式都是mp4 ，在安卓机的 h5 页面上播放没有问题，但是在苹果手机就出现如下图： 开始分析原因： 觉得是转码的原因。于是从视频编辑部 要了 原稿视频原件，自己去下载了一个 转码制作软件，在mac 电脑上转码成mp4 格式 ，然后在ios里面可以播放出来。但问题是为啥在视频编辑部那边制作的视频，有一些不能在ios 上正常播放，莫非是因为我们用的平台不一样...
手机端h5视频播放踩的一些坑
liusensen00的专栏
12-20 1万+
最近在开发手机h5视频播放器嵌app里，在网上看到一些h5的插件，如video.js,zyMedia..., 个人觉得如果在移动端用的话，没多大必要用这些插件，直接用h5提供的标签就可以了， 官方也提供了很多关于播放器的接口方法。 说一下我遇到的坑吧，由于项目是一个试水的项目，所以公司决定先用MP4格式的视频， 视频是视频提供商提供的，刚开始他们提供了一个视频大小240M，由于网络，带宽一
m3u8流文件在html视频播放器中播放有声音无画面问题
m350058411的博客
10-21 8550
m3u8流文件在html视频播放器中播放有声音无画面问题 前言 最近在做一个海康视频设备直接在网页上播放的功能，由于现在浏览器不支持flash等插件，所以想着将海康的rtsp流先转化为hls流再使用html5来播放直播画面，但是在后台把流转化成hls流的m3u8文件后再到html中播放就出现了有声音没画面的问题，先后试了videojs，hls.js，dplayer等播放器插件，均无法播放画面只有声音。 解决方案 实际上，这个问题是播放器插件和流媒体格式和海康的流媒体格式不一致导致的，市面上大部分的海康流媒体
php视频有声音没画面,Html5-video ，播放视频有声音无画面（微信H5页面）
weixin_32719533的博客
03-28 364
求有过类似开发经验的解惑。。。。问题：在做一个H5视频连续播放页面，在自动播放下一个视频的时候，有时会只有声音无画面，有时又正常，想请问一下大神们是神马原因？如何解决？(针对iPhone就可)测试环境：微信端(iPhone4s，5s)－出现以上问题；PC端(谷歌浏览器模拟移动设备)－未出现问题，所以麻烦回答问题的大神用微信真实环境测试看看，后面我会贴出我的代码。代码：(以下代码有用到zepto.j...
html5 video 直播流无声音,H5使用Video标签上传视频有声音无画面的解决方案
weixin_36393239的博客
06-04 2380
前端用H5的Video标签做了播放器，部分mp4文件上传成功后只有声音而没有画面，经过了解之后才知道此标签只支持编码为H264的MP4文件，不支持编码为MPEG4的MP4文件，想成功播放必须要转码。于是就去网上找啊找，刚开始全是格式化工厂转，但是我要的是可以用代码实现的。。。但最后找到一种折中的方法，就是拿ffmpeg工具结合代码来完成转码。当然了，首先得检测该MP4的编码是哪种类型，如果是H26...
Html5 video 标签中视频有声音没画面问题解决过程
哈哈虎的博客
10-26 1万+
Html5 video 标签中视频有声音没画面问题解决过程 一、问题： mp4视频标准 h264 格式的没有问题，mpeg4-V 格式的只有声音。不出画面 二、分析 1、我们无法限制用户使用什么设备上船，pc、android手机还是ios手机 2、不同设备缺省视频格式不一样 3、就算同一种设备，不同软件制作的视频格式也不一定完全一样 4、php上传只能设置视频文件大小和文件后缀等，不
html5的video标签播放视频有声音无图像
eva_feng的博客
07-03 7299
项目中使用视频播放器video.js 播放本地视频时，遇到个问题，进度条能移动有声音但是没有图像。百度了下,了解相关知识点。 目前video标签只支持MP4，WebMail，Ogg格式的视频。 MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器 Ogg = Ogg 文件使用 The...
解决H5播放视频黑屏只有声音没有图像的问题
06-13
出现H5播放视频黑屏只有声音没有图像的问题可能有多种原因，以下是几种可能的解决方法： 1. 检查浏览器是否支持视频格式。不同浏览器对视频格式的支持有所不同，可能导致无法正常播放。可以尝试使用其他浏览器或更新浏览器版本。 2. 检查视频文件是否损坏。视频文件损坏也可能导致无法正常播放。可以尝试重新下载视频文件或使用其他视频文件进行测试。 3. 检查视频解码器是否正常。如果视频解码器出现问题，也可能导致视频无法正常播放。可以尝试更新或重新安装相应的解码器。 4. 检查浏览器插件是否正常。一些浏览器插件可能会影响视频播放，可以尝试禁用或卸载插件进行测试。 5. 检查操作系统设置。某些操作系统设置可能会影响视频播放，可以尝试调整相关设置进行测试。 希望以上方法能够解决您的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值