h5页面怎么制作成视频（如何h5制作）

本篇文章给大家谈谈h5页面怎么制作成视频，以及如何h5制作对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、制作好的H5能不能转格式成mp4格式的视频
• 2、如何在h5中添加视频？
• 3、h5视频怎么制作？
• 4、将视频作为H5页面背景

制作好的H5能不能转格式成mp4格式的视频

制作好的H5可以转格式成mp4格式视频，解决方法如下：

1、首先双击打开视频格式化转换器，点击“添加文件”，将需要转换格式的视频批量添加进来。

2、视频添加进来后，点击右下角的“选择格式”。

3、在这里，选择视频格式为MP4。

4、最后，点击右上角的“开始转换”，如下图所示。

5、当进度条显示100%时说明就转换成功了，软件会自动跳转到输出目录中，如下图所示就完成了。

如何在h5中添加视频？

通过html5中的video标签添加视频文件。

1、新建html文件，如图所示，在body标签中添加video标签，为video标签设置“src”属性，属性值是视频文件地址，这里以html同一目录下的“movie.mp4”视频为例：

2、此时的视频只会显示一个封面，并没有控制按钮，这时为video标签添加“controls”属性，如图所示，不需要添加属性值，可以看到视频中出现了常用的控制按钮：

3、直接插入的视频显示宽和高是视频本身默认的宽和高，这时可以给video添加我们想要的宽和高，这里以宽度400和高度300为例，添加属性“width”，属性值为“400”，添加属性“height”，属性值为“300”：

4、这时视频默认是加载完成后等待用户点击播放按钮再播放，如果需要加载完成后自动播放，可以给video添加属性“autoplay”，属性值为“autoplay”，这时视频加载完成后就会自动播放：

h5视频怎么制作？

 H5其实可以打开秀米APP,之后用微信注册。 之后就会有一个新手指南

就会见到这个界面之后设计就可以按照你自己的想法制作一个你喜欢的H5了

将视频作为H5页面背景

最近接到一个应用场景：将.FLV格式视频文件作为页面背景。

网上直接查将.FLV格式文件作为页面背景方法不太明确，突然想到了用H5的新标签video,于是找到了将视频作为H5页面的方法：

（1）首先新建一个带video标签的H5页面,将video标签的source里写上视频链接地址(先放入，MP4格式的demo文件)。

页面在chrome浏览器下看是一个静态画面，给video加上autoplay自动播放属性属性，加上循环播放的属性loop，以及不需要声音属性muted，这样视频就安放好了。

（2）这个时候video并没有铺满整个屏幕，在body里添加样式margin:0 autol时视频横向铺满整个页面；接下来给video添加样式，让它作为页面背景。

其中z-index: -99来设置video的层级，-webkit-filter:grayscale(100%)来设置视频的灰色调属性，百分比越低灰度值越高。

（3）测试完上面的OK后，确定video属性可以将视频作为H5页面背景，然后查了一下video标签可以播放的视频格式，目前，video 元素支持三种视频格式：MP4、WebM、Ogg。那把.flv格式转成.mp4格式的文件就可以搞定了需求了。

通过做上面的需求，又将video标签属性的方方面面总结了一下：

1、浏览器支持：

IE9浏览器及以上、Chrome浏览器4及以上、FF浏览器3.5及以上、safari4.0浏览器及以上、opera浏览器

10.5及以上；

2、video 元素支持三种视频格式：

MP4、WebM、Ogg。但是似乎各个浏览器对MP4格式的支持性最好。

MP4格式 MIME-type=video/mp4

WebM格式MIME-type=video/WebM

Ogg格式MIME-type=video/Ogg

3、video的可选属性

(1) src属性和poster属性：video属性的width,height属性就是来设置视频的宽高属性，src属性就是用来引入视频的路径，poster是用来指定一张图片，作为视频的封面。

(2) preload属性

此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。

None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。

Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据

（包括尺寸，第一帧，曲目列表，持续时间等等）。

Auto：全部预加载

(3) controls属性

controls="controls"表明需要不需要有控制栏，控制栏须包括播放暂停控制，播放进度控制，音量控制等等。

(4) loop属性

一目了然，loop属性用于指定视频是否循环播放，同样是一个布尔属性。

(5) autoplay属性

Autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。

(6) source标签

Source标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。就是防止一个浏览器不能播放一种格式文件的时候，可以播放相同文件下其它格式文件。

此标签包含src、type、media三个属性。

src属性：用于指定媒体的地址，和video标签的一样。

Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。

Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。你想到style标签的media属性了么？

h5页面怎么制作成视频的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于如何h5制作、h5页面怎么制作成视频的信息别忘了在本站进行查找喔。