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

当练习HTML从插入视频时发现只能播放声音去没有视频画面这怎么解决呢?
第一查看html video 标签支持的视频格式,一共支持三种格式: Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。
html video 标签支持的视频格式
重点:比如MP4格式,MP4只是一个容器,里面还有一个叫编码器的东西。格式虽然都是MP4但是html中只支持H.264的编码格式。所以要用软件来转码。
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

转码工具
格式工厂官网下载
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
要确定视频编码格式为H264
然后点击开始输出就Ok了,在插入使用就可了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体学习</title>
</head>
<body>
<!--
src :视频的属性
poster:视频封面,没有播放时显示的图片
preload:预加载
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制条
width:视频宽度
height:视频高度
-->
<video src="../Resources/video/8.mp4" controls autoplay loop ></video>
</body>
</html>

Guess you like

Origin blog.csdn.net/weixin_45662838/article/details/118305807