web前端入门到实战：HTML5 video自定义视频播放器

最新推荐文章于 2024-08-15 17:40:17 发布

白T恤架构师

最新推荐文章于 2024-08-15 17:40:17 发布

阅读量1.7k

点赞数 1

分类专栏： html 文章标签： html html5 css javascript 前端

本文链接：https://blog.csdn.net/ITHHH111/article/details/105636452

版权

本文介绍了如何从零开始创建一个HTML5视频播放器，包括前端实现过程。在开发过程中，遇到了onmouseup和onmousemove事件交互的问题，以及在拖动元素时遇到的默认行为阻止问题，这些问题的解决对于完善自定义视频播放器至关重要。

摘要由CSDN通过智能技术生成

效果图：

video.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
    <style> *{margin:0;padding:0;list-style: none;}
        /*body{background:#d0d8e9;}*/
        /*要么不加position，如果加了则必须同时设置body和height高度为100%*/ html,body{ background:#d0d8e9; position: relative; height:100%;
        } .box{width:540px;height:332px;box-shadow:0 0 4px #d0d8e9;position: absolute;left:50%;top:50%;margin:-166px 0 0 -270px;} .videoNode{width:540px;height:305px;/*float布局可以清除上下间的空隙*/float:left;background-color: #000;} .ctrNode{width:540px;height:27px;/*gif格式容量更小*/background:url(data/ctrl_bg.gif) repeat-x;float:left;} .playNode{float:left;width:13px;height:15px;margin:6px 0 0 14px;/*png更清晰*/background:url(data/playbtn.png) no-repeat;cursor:pointer;} .pauseNode{float:left;width:13px;height:15px;margin:6px 0 0 14px;/*png更清晰*/background:url(data/pause.png) no-repeat;cursor:pointer;}

        /*时间进度条部分*/ .processNode{width:260px;height:9px;background:url(data/ctrl_bg.gif) top repeat-x;margin:9px 0 0 14px;float:left;position: relative;} .processLeft{position: absolute;left:-2px;top:0;background:url(data/proleft.png) no-repeat;width:4px;height:9px;} .processRight{position: absolute;right:-2px;top:0;background:url(data/right_bg.png) no-repeat;width:4px;height:9px;} .processCircle{position: absolute;left:-8.5px;top:-3px;background:url(data/circle.png) no-repeat;width:17px;height:17px;cursor:pointer;z-index:5;} .lineNode{width:0%;height:100%;position: absolute;top:0;left:0;background:url(data/line_bg.png) repeat-x;} .lineRight{position: absolute;width:2px;height:7px;top:0;right:0;background:url(data/line_r_bg.png) no-repeat;}

        /*声音进度条部分*/ .timeNode{float:left;width:57px;height:10px;margin:9px 0 0 9px;} .timeNode span{float:left;line-height:10px;font-size:10px;color:#fff;} .volumeNode{width:19px;height:17px;float:left;margin:6px 10px 0 17px;background:url(data/volum