HTML5 video标签播放本地视频只有声音没有图像 解决办法

最新推荐文章于 2024-08-16 09:46:00 发布
最新推荐文章于 2024-08-16 09:46:00 发布
阅读量3.7w 收藏 13
点赞数 6
分类专栏： 网页技术 文章标签： HTML5 video标签 编码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ltaihyy/article/details/51262298
版权


今天做项目，需要播放视频功能，想到用HTML5中的video标签，但是播放本地视频时只有声音没有图像

换成网上视频播放时一切正常，不知是何原因？

看到有篇文章说是视频的编码问题，抱着试试看的心态，下载格式工厂进行转码（avc(h264)）

没想到的是，竟然成功了！看来还真是编码问题


额外知识：MP4有3种编码，mpg4(xdiv),,mpg4(xvid)，avc(h264)，

                  只有h264才是公认的MP4标准编码


龙之家
关注
专栏目录
HTML5视频播放插件 video.js介绍
09-22
HTML5视频播放插件video.js是目前流行的视频播放解决方案之一，主要用于在网页中嵌入视频播放功能。它提供了一个简单的、跨浏览器兼容的视频播放器，而无需依赖于Flash等第三方插件。此插件特别适合在移动端设备上...
html5的video标签播放视频有声音无图像
eva_feng的博客
07-03 7149
项目中使用视频播放器video.js 播放本地视频时，遇到个问题，进度条能移动有声音但是没有图像。百度了下,了解相关知识点。 目前video标签只支持MP4，WebMail，Ogg格式的视频。 MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器 Ogg = Ogg 文件使用 The...
video标签播放视频，有声音无图像的解决办法
热门推荐
illidan_TLD的博客
05-06 3万+
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="test.png" data-setup="{'example_option':true}"> 今天在使用video播放
html5 video 静音
最新发布
weixin_31998371的博客
08-16 94
我整理的一些关于【IDE】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/f2PFnNHTML5 Video 静音实现指南 在现代网页开发中，视频是一种重要的视觉媒介。在视频播放中，适当的声音处理尤其重要。对于需要在静音模式下播放的视频，如何实现 HTML5 视频的静音功能是...
HTML5中视频标签学习中出现只显示声音而没有画面的情况。
Huui_的博客
06-22 2023
在html中，视频标签画面的不显示原因之一：html只支持MP4的H264的编码格式
【HTML】HTML5 video播放有声音无图像的解决方法
九师兄
11-07 4706
如果以上方法都无法解决问题，建议尝试使用不同的视频播放器或者将视频文件转换为不同的格式，看看是否能够正常播放。不同的浏览器支持不同的视频编码格式，如果视频文件使用了不被浏览器支持的编码，可能会导致只有声音没有视频。而且奇怪的是我试过我们300M到1G之间的视频是有问题的，但是300M以下的，或者1G的视频都是没有问题的。如果你的计算机性能较低，可能无法处理较大的视频文件，导致只有声音没有视频。尝试减小视频的分辨率和帧率，或者使用更高效的压缩算法，以减小文件大小。这个我试过，采用不同的浏览器，都不行。
在使用html5的video标签播放视频时为何只有声音却没有图像
weixin_34294649的博客
04-28 1715
在使用html5的video标签播放视频时为何只有声音却没有图像？ 答:使用格式化工厂转个编码就行了，MP4有3种编码，mpg4(xdiv),,mpg4(xvid)，avc(h264)转换成H264编码就可以网页正常播放了，H264才是公认的MP4标准编码。。。。。 并不是代码的原因和浏览器的兼容性问题哦^_^ 需要格式化工厂的私信我  ...
2022.6.13 video标签只显示了音频问题
weixin_43160044的博客
06-13 809
video标签只显示了音频问题
html5声频audio和视频video等新特性详细说明
09-28
- `poster`属性：若指定，将在视频开始播放前显示指定图像，通常用作预览图。 - 除了音频`<audio>`的属性，`<video>`还支持`autoplay`（自动播放）、`loop`（循环播放）和`preload`（预加载策略）等属性。 ### 多...
ckeditor html5_video 插件添加封面和中文功能
11-19
HTML5 视频标签 `<video>` 用于嵌入视频内容，通常包括 `src`（视频源）、`controls`（播放控件）、`poster`（预览图片）等属性。在 CKEditor 中，通过 HTML5-Video 插件，我们可以方便地在编辑器内创建和配置这些...
HTML5打开本地摄像头，视频设备可选，可获取设备id、拍照
09-24
首先，HTML5的`<video>`标签允许我们在网页上嵌入视频内容，同时也提供了访问摄像头的接口。通过设置`srcObject`属性，我们可以将摄像头的实时流连接到`<video>`元素上。以下是一个简单的示例： ```html <video id=...
html5响应式在线视频分享交流平台网站
07-13
这种功能通常依赖于HTML5的`<video>`标签，它支持本地播放视频，而无需依赖Flash或其他插件。此外，网站可能还采用视频编码技术如H.264，以保证视频在不同设备和网络环境下的高质量播放。视频的上传和存储可能涉及云...
关于h5 video标签只显示音质没有画面的问题
qq_36990886的博客
03-30 560
根据工作需求，需要将一个flv格式的视屏放在手机显示,本人用到h5的video遇到相关的几个问题，跟大家分享一下 1，使用flv视屏转换器将flv格式的视屏转化为MP4的格式； 2，发现只有音质没有画面，MP4的编码格式有3种mpg4(xdiv),,mpg4(xvid)，avc(h264)
video标签播放本地视频只有声音没有图像的解决办法-视频转码格式工厂或FFmpeg
細水、長流√的专栏
03-14 3429
会发现只有h264编码的MP4视频（MPEG-LA公司）、VP8编码的webm格式的视频（Google公司）和Theora编码的ogg格式的视频（iTouch开发）可以支持html5的标签。MP4有3种编码，MPEG4(DivX)、MPEG4(Xvid)、AVC(H264)；对于视频编码问题，下载了“格式工厂”，将输出配置里面的编码改为 AVC(H264) ，导出视频。再次本地播放问题解决。对于视频编码问题，下载了“格式工厂”，将输出配置里面的编码改为 AVC(H264) ，导出视频。
H5的Video标签无法播放MP4文件只有声音无画面
Hannah_wy的博客
09-15 4791
最近在项目中碰到了一个问题：在利用H5的video标签播放视频时，发现有的视频可以正常播放，但有的只有声音没有画面。
【Springboot + Vue 视频播放web项目】解决视频播放只有声音没有画面
weixin_40018873的博客
01-31 2773
使用vue-video-player作为视频播放插件，捣鼓挺久de了一堆bug之后终于能读取本地MP4视频文件，但是只有声音没有画面前端也是能够正确地根据url找到文件，音频也是正确的。
解决！html中使用video标签调用本地视频结果只有音频没有视频画面
weixin_46281068的博客
11-10 3111
解决，html中video标签使用了，效果却还是audio的，这里直接解决。快来看看吧
html5中video视频只有声音没有图像
wjm0519的博客
04-24 3996
解决方案： 1、使用视频标签； 1 2 3 <video width="352"height="264"controls autobuffer> <source src="video/hjh.mp4"type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>&l...
HTML中 video标签播放MP4只有声音没有图像
kongziL的博客
04-14 7628
HTML5中的video标签播放MP4，只有声音没有图像 <video id="myv" width="600" height="400" src="video.mp4" ></video> mp4的视频编码有三种：MPEG4(DivX)、MPEG4(Xvid)、AVC(H264)， 在格式工厂中，把视频文件转换成AVC(H264)编码，就能正常播放。 ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值