有一个小的问题,高度自适应直接用于网站的时候无效,无论百分之多少都只显示一个固定的的高度,必须用固定高度才能便于显示全部的video窗口,且video会随着视频清晰度自动变更大小,导致iframe设置好的固定高度仍然很不方便,最好是把img里的高宽都改成100%。
主界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>电影播放站</h1>
<a href="VideoHtml01.html" target="Video">
<img src="./media/01.jpg" alt="钢铁侠3" width="10%" height="10%">
</a>
<a href="VideoHtml02.html" target="Video">
<img src="./media/02.jpg" alt="中国合伙人" width="10%" height="10%">
</a>
<a href="VideoHtml03.html" target="Video">
<img src="./media/03.jpg" alt="致青春" width="10%" height="10%">
</a>
<iframe src="VideoHtml01.html" frameborder="1" width="80%" height="800" name="Video"></iframe>
</body>
</html>
video系列窗口:
每个视频文件都需要一个窗口来放置,比较麻烦,但能用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="./media/fun.mp4" controls></video>
</body>
</html>