制作网页视频
- 1. 准备视频文件
- 2. 引用视频文件
- 3. 完整代码如下
- 4. 问题解决
1. 准备视频文件
先准备好视频文件,放入 img 目录下
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>
执行结果如下所示:
4. 问题解决
问题: 在写完代码后,运行,有可能会出现视频没有画面的情况;
解决方法: 下载 格式工厂 ,在格式工厂里转换一下就行了;
第一步:设置转换后的文件输出到哪个文件夹下
第二步:将视频文件拖入到软件中,点击配置,看一下视频编码是否是H264
第三步:
第四步:找到视频文件输出文件夹(我的是放到桌面上),HTML引用输出的视频文件,即可解决。
更多推荐
web 前端学习之制作网页视频
发布评论