H5 video标签播放MP4

原创已于 2022-05-10 16:10:25 修改 · 2.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5

收录于

于 2022-05-10 15:49:19 首次发布

前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在HTML中使用source标签来播放MP4视频，重点强调了video元素的属性设置，包括type为video/mp4以确保浏览器正确解析，以及确认MP4文件编码为h264，以实现跨平台兼容性。

1、使用source标签
2、source标签type改为video/mp4
3、确认播放的MP4编码为h264

<video id="video-player" muted="muted"
	poster="static/images/test.png" preload="none" autoplay="autoplay"
	loop="loop">
	<source src="static/test.mp4" type="video/mp4"/>
</video>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Bryce96

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

超级简单的Vue中引入Video.js播放1

milijiangjun的博客

09-22

974

1.安装依赖 $ npm install video.js 注册main.js import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 界面使用 <template> <div class="test_two_box"> <video id="myVideo" class="vide

1 条评论您还未登录，请先登录后发表或查看评论

解决QtWebEngine无法播放H5中的mp4

二丶九

04-01

9039

环境：Win7 QT5.7.1Vs2015; 问题：使用QT5.7.1 QtWebEngine 生成的浏览器无法播放HTML5 Video标签的mp4文件; 原因：QtWebEngine 不带解码器; 解决方案：重新编译QtWebEngine 步骤如下： 1、下载Qt；Qt下载链接 2、安装qt-opensource-windows-x86-msvc2015-5.7.1.e...

Linux 编译链接那些事儿（03）动态库瘦身之剥离调试信息

热门推荐

皮蛋很白的博客

02-24

2万+

用 QQ 的截图录屏功能录制的 mp4 视频，无法用 video 标签正常播放

H5的Video标签无法播放MP4文件只有声音无画面

Hannah_wy的博客

09-15

5926

最近在项目中碰到了一个问题：在利用H5的video标签播放视频时，发现有的视频可以正常播放，但有的只有声音没有画面。

H5之VIDEO 标签视频播放不了MP4视频的问题

weixin_33906657的博客

10-27

5700

2019独角兽企业重金招聘Python工程师标准>>> ...

H5播放器标签video播放mp4格式有声音没有图像解决方法

liukai6的博客

03-01

4191

在使用h5的video标签播放视频很方便,但是有时会出现有声音没有图像的情况,这个时候我们考虑一下视频编码的问题下载转换工具,对视频进行格式的变化,视频编码选择AVC(H264)这样就可以直接播放了,还可以对很多配置进行转换

H5中video标签视频播放

linhui03的博客

01-04

907

今天用H5中video标签做视频播放，用格式化工厂转换成mp4格式，播放时发现只有声音没有图像，解决办法：在转换成mp4格式的时候选择输出配置中设置为AVC编码，就解决了。

H5的video标签在网页上播放MP4视频时只有声音没有画面

weixin_30413739的博客

01-30

1338

最近做一个项目时，发现mp4文件播放时没有图像，只有声音，代码检查了N次，都没有问题，就算是直接使用网上的实例代码，也只能播放实例视频，mp4文件绝对路径，相对路径也都试了，还是不能播放我的mp4. 最后才想到可能是mp4文件本身的问题，查询了一下 mp4的视频编码有三种：MPEG4(DivX)，MPEG4(Xvid)，AVC(H264) 只有AVC(H264)编码格式的mp4才可以在网...

Web端H5播放FLV、HLS、MP4 (二)

东成熙就

12-14

1万+

Web端H5播放FLV、HLS、MP4

uniapp开发h5端使用video播放mp4格式视频黑屏，但有音频播放解决方案

stars______的博客

04-10

3333

mp4格式视频有一些谷歌播放视频黑屏，搜狗浏览器可以正常播放。第二步：点击添加文件选择想要转换编码的mp4格式视频文件。第四步：视频编码选择为h264，然后点击右下角确定。完成后文件夹里就有转码成功后的视频文件了。第六步：此时已经有一条视频，点击开始。如果是自己手动上传文件可以手动转换。如果是后端上传就需要后端去转换。第三步：点击右上角输出配置。第五步：再点击右下角确定。

用H5实现简单的MP3MP4的播放

qq_36159785的博客

05-16

1万+

H5实现视频和音乐播放确实比Android简捷多了首先就是源文件要添加进项目里面，这里我把MP3文件和MP4文件都放在了img文件夹下面，然后就是代码的实现，其实代码也比较简单的，全都是调用指令，设置播放按钮，做一些语法处理啦，直接上代码了，不多说，毕竟我也是初学者<html> <head> <meta charset="utf-8" /> <ti

video标签知多少

01-28

4449

视频对于现在的web来说已经见怪不怪了，如何在web上播放视频呢？有请我们今天的主角video标签。

video标签学习 & xgplayer视频播放器分段播放mp4

pscool的博客

05-30

6393

上面的分段请求，我感觉是不是哪里写的有问题，接下来使用一些springboot自带的分段资源处理，它没有报错，后面需看看源码是为什么？autoplay属性：video标签设嚣该属性，就会自动播放（但是，必须同时设置muted，否则不会自动播放）poster属性：设置视频摇放前显示图像（相当于视频封面，默认情况下，在视频未播放前，会显示视频的第一帧）loop属性：video标签出现该属性，在视频播放结束后会循环播放（默认情况下，视频播放完了就会就停止）src：接收要播放的视频的url地址，这个url可以是。

java 苹果h5不能播放_iOS h5点播播放mp4视频遇到的坑,ios的h5不能播放视频等

weixin_34604756的博客

03-01

1327

背景h5的出现对多媒体在网页上的视频播放提供了支持，以前网页播放视频基本依赖于flash等插件。而h5的video标签实现了网页播放视频无插件化。因此，h5的出现给网页视频播放带来极大的便捷性，目前，PC端的Chrome，安卓端浏览器，微信浏览器，QQ浏览器(自带播放器)，以及IOS的safari都支持h5的video标签。部分PC端浏览器比如IE还不支持。基础知识普及h5的video标签目前支持...

mp4文件播放不了

时光的脚印

02-17

9681

做在线视频时，部分mp4文件不能在flash播放器和h5的video标签中正常播放，原因是因为mp4编码不正确，一定要使用h264编码。可以通过使用ffmpeg来进行视频转换，具体如下（将test.mp4转换为h264编码）： ffmpeg -i test.mp4 -c:v libx264 -strict -2 testnew.mp4 ffmpeg安装： wget http://www.t

Minio在IOS环境下播放MP4与MOV格式视频兼容问题处理

qq_35526951的博客

07-10

1413

springboot+minio处理IOS环境下MP4与MOV格式视频播放问题