web 前端学习之制作网页视频

制作网页视频

  • 1. 准备视频文件
  • 2. 引用视频文件
  • 3. 完整代码如下
  • 4. 问题解决

1. 准备视频文件

先准备好视频文件,放入 img 目录下
web 前端学习之制作网页视频_第1张图片

2. 引用视频文件

video 是HTML的视频标签;

<video width="320" height="240" controls autoplay>		
	<source src="img/4~1.mp4" type="video/mp4" />		
video>

3. 完整代码如下

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>web 前端学习之制作网页视频title>
	head>
	<body>
		<video width="320" height="240" controls autoplay>		
			<source src="img/4~1.mp4" type="video/mp4" />		
		video>
	body>
html>

执行结果如下所示:
web 前端学习之制作网页视频_第2张图片

4. 问题解决

问题: 在写完代码后,运行,有可能会出现视频没有画面的情况;
解决方法: 下载 格式工厂 ,在格式工厂里转换一下就行了;
第一步:设置转换后的文件输出到哪个文件夹下

web 前端学习之制作网页视频_第3张图片
第二步:将视频文件拖入到软件中,点击配置,看一下视频编码是否是H264
web 前端学习之制作网页视频_第4张图片
第三步:
web 前端学习之制作网页视频_第5张图片
第四步:找到视频文件输出文件夹(我的是放到桌面上),HTML引用输出的视频文件,即可解决。
web 前端学习之制作网页视频_第6张图片

你可能感兴趣的:(web,前端学习,前端,音视频)