H5 video标签播放MP4

已于 2022-05-10 16:10:25 修改
阅读量2.2k 收藏 1
点赞数
分类专栏： 前端 文章标签： html5
于 2022-05-10 15:49:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caiczp/article/details/124690148
版权

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>
Bryce96
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用H5实现简单的MP3MP4的播放
qq_36159785的博客
05-16 1万+
H5实现视频和音乐播放确实比Android简捷多了 首先就是源文件要添加进项目里面，这里我把MP3文件和MP4文件都放在了img文件夹下面， 然后就是代码的实现，其实代码也比较简单的，全都是调用指令，设置播放按钮，做一些语法处理啦，直接上代码了，不多说，毕竟我也是初学者<html> <head> <meta charset="utf-8" /> <ti
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
09-04
在本示例中，开发者创建了一个简单的JavaScript函数`playVideo()`，该函数用于在网页上插入一个`<video>`控件，并且这个控件被设计成仅支持Android和iOS设备的默认视频格式：MP4和3GP。 首先，让我们详细了解`...
MP4视频无法在H5网页中播放
lsf1192354203的博客
10-31 1118
html5新标签video
uniapp开发h5端使用video播放mp4格式视频黑屏，但有音频播放解决方案
最新发布
stars______的博客
04-10 1338
mp4格式视频有一些谷歌播放视频黑屏，搜狗浏览器可以正常播放。第二步：点击添加文件选择想要转换编码的mp4格式视频文件。第四步：视频编码选择为h264，然后点击右下角确定。完成后文件夹里就有转码成功后的视频文件了。第六步：此时已经有一条视频，点击开始。如果是自己手动上传文件可以手动转换。如果是后端上传就需要后端去转换。第三步：点击右上角输出配置。第五步：再点击右下角确定。
h5点播播放mp4视频遇到的坑,ios的h5不能播放视频等
热门推荐
Lucifer的博客
12-18 3万+
背景 h5的出现对多媒体在网页上的视频播放提供了支持，以前网页播放视频基本依赖于flash等插件。而h5的video标签实现了网页播放视频无插件化。因此，h5的出现给网页视频播放带来极大的便捷性，目前，PC端的Chrome，安卓端浏览器，微信浏览器，QQ浏览器(自带播放器)，以及IOS的safari都支持h5的video标签。部分PC端浏览器比如IE还不支持。 基础知识普及 h5的v
Video 标签无法播放 mp4 的原因和解决办法
皮蛋很白的博客
02-24 1万+
用 QQ 的截图录屏功能录制的 mp4 视频，无法用 video 标签正常播放
MP4文件使用video标签前端不能播放
m0_64491500的博客
12-11 1328
相对地址：比如./bike1sot2.mp4，./代表对于你的HTML文件的当前目录，相当于html文件的邻居。在浏览器搜索online-convert，选择转换MP4，视频编解码器选择h264型，然后下载转换好的视频，更改你的HTML代码。简单直接，发布视频到哔哩哔哩，然后在视频页面分享处，点击嵌入代码，然后就可以得到 标签的代码。绝对地址：比如C:\Users\1\Desktop\科研开发实践\bike1sot2.mp4。是的，MP4还有多种格式，是视频编码器的锅。
vue中使用video标签播放MP4，m3u8格式视频
~~
08-26 1万+
一，播放MP4视频 <video src="/video/suanfa.mp4" controls width="100%" height="100%" poster="/video/img_cover.png" //视频初始封面地址。可选 ></video> 二，播放m3u8格式视频 比如播放m3u8格式的监控摄像头的视频 首先安装 cnpm i -S video.js cnpm i -S videojs-cont
【HTML】讲讲HTML5视频播放的方式
归子莫的博客
02-07 9328
上节讲了HTML5的音频播放，和音频播放一样，需要借助flash才能在网页上使用视频。随着HTML5出来以后，就不需要借助flash了，本身可以通过video标签支持。
使用video标签，连续播放无限个mp4(h264封装的)视频时，画面会闪烁的问题解决
wflsyf的博客
10-08 2255
采用的预加载方法，使用两个video标签加一个js中的Array（存储还没播放的视频。） html页面代码，除了下面的div之外，还需导入一个jquery的库我导的jquery-3.4.1.js这个。 <div> <video id="devVideo0" muted="muted">浏览器不支持 video0 标签</video> <video id="devVideo1" muted="muted">浏
解决html5中video标签无法播放mp4问题的办法
11-21
前言 最近发现了一个问题，在手机录制了一个1.mp4文件，主流浏览器都能正常播放。...查阅文档，关于video标签所支持的视频格式和编码： MPEG4 = 带有H.264视频编码和AAC音频编码的MPEG4文件 WebM = 带有VP8视频编码和
H5的video标签跨域.HTML的video标签跨域_跨域ajax
12-24
H5的video标签跨域.HTML的video标签跨域 我们都知道HTML video标签能播放视频 但是如果你的video要播放的是非当前域名下的视频文件,这就要跨域播放视频, 应该如何实现呢?
HTML5的Video标签有部分MP4无法播放的问题解析（多图）
11-21
现在网页视频的应用极为广泛，在实际项目中发现有些MP4文件可以在H5网页中正常播放，但有些却不行，这是为什么呢？ 1、首先我自己从网上下载的一个MP4文件，IE10和谷歌都能正常...网上下载的能正常使用video标签播放的
html5用video标签流式加载的实现
11-20
video标签 浏览器的video标签通常是接收一个src属性，然后浏览器就会根据这个src属性来自动加载视频。 这个过程是浏览器来加载video的。 这种方式有什么问题吗？ mp4文件不能流式加载 webm，flv，hls等格式兼容性...
解决video标签在安卓webview下无法自动播放问题
01-05
在安卓webview下 html5 的 video 设置autoplay 属性 或在document ready中使用play方法 都不能使它自动播放 只能用webview的onPageFinished方法来解决此问题，代码如下： 代码如下: mPlayer.setWebViewClient(new ...
HTML5 video 视频标签使用介绍
09-28
<source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <!-- 不支持<video>标签时的备选内容 --> 您的浏览器不支持HTML5视频。 </video> ``` **属性说明：** - `width`和`...
html5播放mp4视频代码
weixin_34090643的博客
09-21 1985
1.nginx支持flv和mp4格式播放默认yum安装nginxcentos7安装nginx时候应该是默认安装nginx_mod_h264_streaming模块的# nginx -V查看是否安装nginx_mod_h264_streaming模块nginx在新版本中已经支持了--with-http_mp4_module --with-http_flv_module这2个模块...
h5录制视频 MP4_h264编码
口袋的天空的博客
08-11 1351
<template> <div class="main "> <div class="left"> <div class="vedio"> <div class="shexiang"> <!--图片展示--> <video ref="video" width="350px" height="265px" autoplay></video&gt
html5 video标签不能播放mp4的问题
董国政的博客
06-09 1万+
最近项目中遇到的问题如下： 利用html5中的 video 标签去播放视频，但是发现有的mp4格式的视频可以播放，有的mp4格式的视频不能播放。视频格式 首先 video 标签只支持MPEG4，Ogg，WebM 三种视频格式，浏览器支持情况如下： 但是，video标签对这三种视频格式是有具体要求的Ogg = 带有 Theora 视频编码 + Vorbis 音频编码 MPEG4 =
h5 video标签 封面
12-09
在H5 video标签中，可以通过添加"poster"属性来设置视频的封面。例如： ```html <video src="video.mp4" poster="cover.jpg"></video> ``` 其中，"src"属性指定视频的地址，"poster"属性指定封面的地址。当视频未播放时，将显示封面图片。需要注意的是，封面图片的尺寸最好与视频的尺寸相同，以避免出现拉伸或压缩的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值