从零开始的异世界!使用<img>和<iFrame>等HTML基础标签制作一个视频播放网站
程序员文章站
2024-03-23 08:44:22
...
视频播放网站的制作
此页面没有引入CSS样式,单纯使用HTML的常用标签,而且使用本地资源,非常简单的哟~不带脑子也能理解。建议小伙伴们手动操作一遍。
此篇文章包含源码和讲解,最后有资源跳转传送门
- 需求
页面上方是<img>
图片列表,用户点击图片,下方<iFrame>
框架中显示其对应的视频。
效果图
制作思路
- 共有4个HTML页面,1个index主页,3个iframe链接的video播放页面。
- index.html页面有三张图片,每张图片设置超链接,点击链接至video播放页面。
- 下方有一个iframe框,图片链接的video页面会出现在这个框架之中。
- video页面中有对应的视频,为了看起来更可观,本人把视频标题和图片也放在了video页面当中。
预备工作
提前准备好图片和视频:
源码和讲解
1.图片列表
index.html页面中存在的图片列表:
<ul>
<li><a href="video03.html" target="myframe"><img src="img/03.jpg"/></a></li>
<li><a href="video05.html" target="myframe"><img src="img/05.jpg"/></a></li>
<li><a href="video08.html" target="myframe"><img src="img/08.jpg"/></a></li>
</ul>
- 使用
<ul><li></li></ul>
先搞无序列表,然后再将需要显示的内容放在里面,这个部分是要放图片的,看起来更加整齐。 - 使用
<img>
标签将图片引入进去,src属性下是图片的存放路径。 - 用
<a>
给<img>
加上超链接,target属性对应的是接下来要说的iframe框架的name属性值,使点击图片可以对应到指定的video播放页面。
2.视频播放页面
有3个html页面,分别是:video03.html、video05.html和video08.html。他们的制作方式都是一样的,完成一个其他的也就知道怎么完成了。
<h3>从零开始的异世界 第3集[点击下方视频播放]</h3>
<img src="img/03.jpg" width="300" height="300"/>
<video src="./video/03.mp4" controls="controls" width="400" height="400">
你的浏览器不支持video视频标签
</video>
- 标题和图片用
<h3
标签和<img>
标签即可,重点是下方的<video>
标签 -
<video>
中src属性下是视频的路径,这样就能视频显示在页面中了。
3.iFrame框
这是这个小制作的精华部分。
iFrame框架可以在一个页面中显示好多个HTML页面,在这里就是负责将上面三个video页面引入到index页面。
<iframe src="video03.html" width="60%" height="500" name="myframe"></iframe>
- 上面一行代码即使iframe框了,src属性是它默认显示的页面,给iframe指定一个name值,这样上面图片的超链接就会跳转到这个iframe框,然后显示其对应的video页面了。
总结
讲解完毕,没想到吧,就是这么easy~
上述资源已上传,需要的小伙伴请自行下载查看,代码传送门:
点击图片iFrame显示视频播放。
鉴于此页面过于朴素,后续还会完善CSS样式等,敬请关注~