解决html标签添加视频只有声音没有图像

最新推荐文章于 2023-11-10 21:49:21 发布
原创 最新推荐文章于 2023-11-10 21:49:21 发布 · 5.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在页面使用HTML标签插入视频时遇到只有声音无图像的问题，原因为视频编码不兼容。通过将视频转码为H264编码的mp4格式解决。使用格式工厂进行转码操作，确保视频在QQ、微信等平台传输后仍可正常播放。

在最近实训项目中遇见了在页面用HTML标签插入视频之后只有声音，没有图像的问题。之后发现这是视频编码的问题。查阅资料之后发现应该把视频转码为H264编码的mp4视频格式就可以了 。还要注意的是就算已经转过码的视频，经过qq微信什么的发送一次，接收后使用还需要转一次码
因此我下载了格式工厂进行转码。直接搜索格式工厂官网进行下载最新版本，安装也是非常容易。然后进行转码，
在这里插入图片描述
首先我的视频是MP4格式，点击它，就会弹出在这里插入图片描述
然后设置输出设置，也就是选择我们要转的码的类型avc(h264)格式，确定

在这里插入图片描述
添加文件并选择输出文件。结束在这里插入图片描述

HTML——标签之文字排版、图片、链接、音视频
阳光开朗大男孩 =￣ω￣=的博客
10-20 1582
这篇博客主要介绍了 HTML 的相关知识，包括定义、基本骨架、标签关系、注释标签、标题标签、段落标签、文本格式化标签、图像标签、超链接、音频标签、视频标签等。还通过两个综合案例，分别介绍了尤雨溪和 Vue.js。HTML 标签丰富多样，各有特点和用途。其中，标题标签有 h1 到 h6 六级，h1 一般一个网页只用一次。段落标签独占一行且段落间有间隙。图像标签需指定 src 属性，超链接用 href 属性跳转页面。音频和视频标签有常见属性可设置。
Advance：HTML 中的视频标签和音频标签
最新发布
新华编程特战队
02-15 2688
这是因为您必须添加另一个称为“控件”的属性，该属性将为您提供播放、暂停和音频按钮等控件，就像视频标签一样。HTML5 提供了此标签，您可以在其中将音乐/音频文件嵌入到 HTML 文档中，而不是使用任何第三方插件（外部库）。但是，如果您尝试在任何其他浏览器上运行此代码，您肯定会看到音频自动播放。在这种情况下，您需要有一个备份文件，如果第一个文件不受支持，该文件将被播放。顾名思义，我们可以得到提示，这些属性可以被 HTML 的所有元素使用。这将在您的网站上显示您的视频。请注意，显示的是图像，而不是加载图标。
html 网页中插入视频没有画面只有声音的问题
YiShiWenYan
03-15 1万+
在html中插入视频，没有画面只有声音。     你的浏览器不支持这种格式的视频播放，请换个浏览器试试 原因：视频编码有问题 。 解决方法：通过格式工厂或其他格式转换工具将编码改为 H264 即可。
解决在页面中播放视频时只有声音却不显示图像的问题
热门推荐
gysea123321的博客
05-22 2万+
视频不光区分格式，相同的格式的情况下还区分编码。就拿mp4格式的视频来说吧，mp4有3种编码，mpg4(xdiv),mpg4(xvid)，avc(h264)，这三种格式虽然在播放器里可以正常播放，但是mpg(xdiv),mpg4(xvid)这两种格式嵌到html5页面里的时候就会出现上述只有声音却不显示图像的那种情况，转换成H264编码就可以网页正常播放了。 可是如何给我们的视频转码(转换编码)呢？下面我就介绍一下如何使用格式工厂来转码(之所以我介绍用格式工厂来转码是因为我觉得格式工厂的功能太强大了，不仅
html5的video标签播放视频有声音无图像
eva_feng的博客
07-03 7346
项目中使用视频播放器video.js 播放本地视频时，遇到个问题，进度条能移动有声音但是没有图像。百度了下,了解相关知识点。 目前video标签只支持MP4，WebMail，Ogg格式的视频。 MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器 Ogg = Ogg 文件使用 The...
html无法正常显示图片或者视频等的原因分析
长高
02-24 3301
html的使用src无法正常显示图片或者视频等的原因 如下，这是我网页文件存放的位置，大家能看到我的图片是跟网页存放在同一个根目录下那么再看看代码，实现效果图。 代码区域 <img src="2.jpg" height="250" width="250"/> <img src="2-2.jpg"/> <img src="2-3.jpg"/> 效果图 请仔细观...
HTML5 video标签（播放器）学习笔记（一）:使用入门
09-28
HTML5的`<video>`标签是现代网页开发中的一个重要元素，它允许开发者在网页上嵌入视频内容，无需依赖Flash或其他第三方插件。这篇学习笔记主要介绍了`<video>`标签的基本使用，包括如何初始化视频播放器，设置视频源...
详解移动端HTML5音频与视频问题及解决方案
12-02
针对这些问题，交互视频的特性在于它可以在iPhone上非全屏播放，可以与其他图形元素集成，甚至可以添加蒙版去掉背景，使视频与普通图形对象融合，提升用户体验。 在实践中，为了优化音频的使用，避免在iOS上频繁...
html标签、html语义化
12-19
HTML 中的 icon 图标是指使用 `<link>` 标签来添加网页的 favicon 图标。favicon 图标是指网页的图标，通常显示在浏览器的地址栏或书签栏中。 HTML 标签和 HTML 语义化是构建网站的基本元素和原则，使用正确的 ...
html视频不播放视频教程,html无法播放视频怎么办
weixin_34847198的博客
06-05 3994
html无法播放视频的解决办法：首先打开相应的HTML代码文件；然后在MIME类型里说明MP4和WebM以及Ogg视频格式；最后修改好视频的编码即可。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。HTML页面嵌入视频无法播放的常见原因HTML5页面内嵌入视频有个标签， 元素支持三种视频格式：MP4、WebM、Ogg。昨天使用了一下这个标签嵌入一段...
解决！html中使用video标签调用本地视频结果只有音频没有视频画面
weixin_46281068的博客
11-10 4236
解决，html中video标签使用了，效果却还是audio的，这里直接解决。快来看看吧
html播放mp4不显示画面,浏览器播放mp4格式视频时只有声音看不到画面的原因及解决方法（精）...
weixin_30581253的博客
06-15 6794
做HTML5网页，要播放视频，视频格式为mp4，结果浏览器只能听到声音，看不到画面。反复测试，多个浏览器均出现此问题。刚开始以为视频的格式不对，我是从MOV转的MP4格式，反复确认嵌入的视频确实是mp4格式的，可是试了好多次结果都一样，只有声音不显示图像，搞了一天，直接搞懵了。在网上到处搜索，最终解决。问题描述：在html5页面中嵌入视频，用浏览器打开页面只听到声音却不显示图像。页面代码：请升级浏...
HTML5中视频标签学习中出现只显示声音而没有画面的情况。
Huui_的博客
06-22 2319
在html中，视频标签画面的不显示原因之一：html只支持MP4的H264的编码格式
Html5 视频播放之video标签的使用(包含注意事项，例如视频无法正常展示，只显示音频等问题)
静若清池，动如涟漪_
09-22 5401
一、html 5 之前播放视频 在html 5之前，嵌入网页中的flash视频可以使用以下标签 <embed src="movie.swf" height="200" width="200"/> 但是， 1)如果浏览器不支持flash，将无法播放视频。 2)iPad 和 iPhone 不能显示 Flash 视频。 3)如果您将视频(*.swf)转换为其他格式，那么它仍然不...
关于使用video标签插入视频时，视频无法播放的问题
amercury0818的博客
01-03 8413
使用video标签插入视频，只显示了一个封面却无法播放视频
HTML_video标签播放本地视频只有声音没有图像 解决办法
小歪博客
05-10 3629
今天做项目，需要播放视频功能，想到用HTML5中的video标签，但是播放本地视频时只有声音没有图像 换成网上视频播放时一切正常，不知是何原因？ 看到有篇文章说是视频的编码问题，抱着试试看的心态，下载格式工厂进行转码（avc(h264)） 没想到的是，竟然成功了！看来还真是编码问题 额外知识：MP4有3种编码，mpg4(xdiv),mpg4(xvid)，avc(h264)， 只有h264才是公认的MP4标准编码 ...
html5 css 插入视频,HTML+CSS入门 HTML网页中插入视频各种方法
weixin_28684757的博客
06-10 1万+
本篇教程介绍了HTML+CSS入门 HTML网页中插入视频各种方法，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<现在如果要在页面中使用video标签，需要考虑三种情况，支持OggTheora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome)，支持H.264的(Safari、IE9、Chrome)，都不支持的(IE6、7、8)。好吧，现...
html5播放mp4不见画面,浏览器播放mp4格式视频时只有声音看不到画面的原因及解决方法（精）...
weixin_32075843的博客
06-11 3115
做HTML5网页，要播放视频，视频格式为mp4，结果浏览器只能听到声音，看不到画面。反复测试，多个浏览器均出现此问题。刚开始以为视频的格式不对，我是从MOV转的MP4格式，反复确认嵌入的视频确实是mp4格式的，可是试了好多次结果都一样，只有声音不显示图像，搞了一天，直接搞懵了。在网上到处搜索，最终解决。问题描述：在html5页面中嵌入视频，用浏览器打开页面只听到声音却不显示图像。页面代码：请升级浏...
CKEditor升级：实现HTML5 Video标签的视频插件添加与兼容
4. 支持海报图像的设置：用户还可以为视频指定一个海报图像，这有助于提升视频的视觉效果，同时在视频尚未加载时给用户一个预览。 安装和使用这个Video插件的步骤大致包括： - 将插件文件复制到CKEditor的plugin...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值