基于HTML5视频技术的在线视频播放页面，包含视频播放窗口和课程目录列表。其中视频播放窗口带有相关控件，可以由用户单击切换全屏效果，以及随时暂停和拖拽到指定时间继续播放。点击目录直接跳转当当前画面。

演示不要用谷歌，谷歌不支持本地拖拽进度条我用的是火狐主要就是label for 来替代按钮的样式代码很简单但是也很实用<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"cont...

ThinkerWing

2415人浏览 · 2020-05-01 23:25:45

ThinkerWing · 2020-05-01 23:25:45 发布

演示不要用谷歌，谷歌不支持本地拖拽进度条我用的是火狐
主要就是label for 来替代按钮的样式代码很简单但是也很实用学会label for 以后按钮越来越好看了
跳转时间通过currentTime来设置
在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        label {
            display: block;
        }
    </style>
</head>
<body>

<button onclick="setCurTime()" id="one" type="button" style="display: none"></button>
<button onclick="setCurTimeTwo()" id="two" type="button" style="display: none"></button>
<button onclick="setCurTimeThree()" id="three" type="button" style="display: none"></button>
<button onclick="setCurTimeFour()" id="four" type="button" style="display: none"></button>



<video id="video1" controls="controls">
    <source src="./video/art.mp4" type="video/mp4">
</video>
<p style="align-items: center;text-align: center">欧洲简史</p>
<hr>
<label for="one"> <img style="background: white;width: 24px;height: 24px;align-items: center "
                       src="./video/播放.png" alt=""> 早期基督美术建筑</label>
<label for="two"> <img style="background: white;width: 24px;height: 24px;align-items: center "
                       src="./video/播放.png" alt=""> 也可以放一个视频中重要的内容片段</label>
<label for="three"> <img style="background: white;width: 24px;height: 24px;align-items: center "
                       src="./video/播放.png" alt=""> 回到头部</label>
<label for="four"> <img style="background: white;width: 24px;height: 24px;align-items: center "
                       src="./video/播放.png" alt=""> 回到尾部</label>

<script>
    myVid=document.getElementById("video1");
    function setCurTime()
    {
        myVid.currentTime=350;
    }
    function setCurTimeTwo()
    {
        myVid.currentTime=500;
    }
    function setCurTimeThree()
    {
        myVid.currentTime=0;
    }
    function setCurTimeFour()
    {
        myVid.currentTime=641;
    }

</script>
</body>
</html>