HTML5里video标签支持哪些格式的视频文件?

一共支持三种格式: Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。

格式    IE     Firefox      Opera      Chrome       Safari
Ogg     No     3.5+         10.5+      5.0+       No
MPEG4  9.0+      No       No        5.0+        3.0+
WebM    No      4.0+       10.6+     6.0+          No

NO:代表不支持这款浏览器。

X.0+:表示支持这款及版本更高的浏览器。

这些大家应该都知道,所以这个不是我说的重点

下面来说一下我今天做项目遇到的问题:
我在项目中需要插入一段视频,视频是甲方提供的,当时我们写的要求是提供一个mp4格式的就可以了。甲方提供的也确实是MP4格式的,但是浏览器竟然不支持。这个是为什么?不是说好的支持MP4格式的吗?然后我开始查资料,才明白原来MP4只是一个容器,里面还有一个叫编码器的东西。格式虽然都是MP4但是html中只支持H.264的编码格式。所以要用软件来转码。软件我已经上传到资源里面了。感兴趣的可以下载看看。

关于标签所支持的视频格式和编码:

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

使用方法(以MP4为例)

第一步

这里写图片描述

第二步

这里写图片描述

第三步

这里写图片描述

  • 8
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
video标签是一种HTML5的元素,用于在网页中播放视频。然而,video标签并不支持苹果.mov格式视频文件。如果页面上既有.mp4格式又有.mov格式视频文件,只能通过使用插件来实现播放.mov格式视频文件。在这种情况下,用户可以使用视频下载工具来下载.mov视频文件,或者在新标签页中打开视频文件进行播放。视频下载工具通常允许用户下载各种不同格式视频文件,包括.mov格式及其他诸如3g2、3gp、avi、mkv等格式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [chrome-video-downloader:Chrome扩展程序,可下载在当前标签页中找到的视频](https://download.csdn.net/download/weixin_42138780/18626063)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [jQuery及video标签视频播放弹窗插件支持mp4,mov等格式详解(图文)](https://blog.csdn.net/weixin_31754149/article/details/117882567)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值