视频播放网站的制作
此页面没有引入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">