1. Python技术站首页
  2. 其他
  3. JavaScript

HTML5自定义视频播放器源码

• JavaScript
yizhihongxing

下面我将详细讲解“HTML5自定义视频播放器源码”的完整攻略。

HTML5自定义视频播放器概述

HTML5自定义视频播放器是一种基于HTML5+CSS3实现的可定制化的视频播放器，使用HTML5标签\<video>和JavaScript代码控制视频播放、暂停、快进等操作，同时利用CSS3对播放器的样式进行设计，进一步调整播放器的外观和交互。

一个完整的HTML5自定义视频播放器，通常包括如下几个部分:

  • 视频播放区域: 通过\<video>标签实现视频播放界面。
  • 控制条: 包括播放按钮、进度条、音量控制、全屏等控制栏。
  • 播放列表: 在视频播放器下方或侧边展示视频列表，以便用户可以在播放器中切换视频。

接下来，我将分享HTML5自定义视频播放器的一个完整实现过程，希望能对你有所帮助。

制作HTML5自定义视频播放器

下面我们来看制作HTML5自定义视频播放器的详细步骤。

一、结构与样式部分

  1. 创建HTML文档，引入样式文件和JavaScript文件。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5自定义视频播放器</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="video-player">
        <video class="video" src="./video/sample.mp4"></video>
        <div class="controls">
            <button class="play-btn"></button>
            <div class="progress">
                <div class="progress-bar"></div>
            </div>
            <button class="volume-btn"></button>
            <div class="volume-slider">
                <div class="volume-bar"></div>
            </div>
            <button class="fullscreen-btn"></button>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>
  1. 添加基础样式
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.video-player {
    position: relative;
    width: 80%;
    height: 600px;
    margin: 50px auto;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px #666;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: #000;
}

.controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #000;
    color: #fff;
    font-size: 14px;
}

.play-btn {
    float: left;
    height: 50px;
    width: 50px;
    background: url("play.png") center no-repeat;
    background-size: 35%;
    border: none;
    outline: none;
    cursor: pointer;
}

.progress {
    position: relative;
    float: left;
    margin-left: 10px;
    height: 20px;
    width: 300px;
    border: 1px solid #fff;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #fff;
}

.volume-btn {
    float: left;
    height: 50px;
    width: 50px;
    background: url("volume.png") center no-repeat;
    background-size: 35%;
    border: none;
    outline: none;
    cursor: pointer;
}

.volume-slider {
    position: relative;
    float: left;
    margin-left: 10px;
    height: 20px;
    width: 100px;
    border: 1px solid #fff;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.volume-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #fff;
}

.fullscreen-btn {
    float: right;
    height: 50px;
    width: 50px;
    background: url("fullscreen.png") center no-repeat;
    background-size: 35%;
    border: none;
    outline: none;
    cursor: pointer;
}

这里的样式只是一个基础版本，你可以根据自己的需求进行修改。

二、JavaScript部分

1. 获取DOM元素

const video = document.querySelector('.video');
const playBtn = document.querySelector('.play-btn');
const progress = document.querySelector('.progress');
const progressBar = document.querySelector('.progress-bar');
const volumeBtn = document.querySelector('.volume-btn');
const volumeSlider = document.querySelector('.volume-slider');
const volumeBar = document.querySelector('.volume-bar');
const fullscreenBtn = document.querySelector('.fullscreen-btn');

这里我们使用了querySelect()方法获取了HTML元素，并使用const关键字定义了变量。

2. 控制视频播放

function togglePlay() {
    if (video.paused) {
        video.play();
        playBtn.style.backgroundImage = "url(pause.png)";
    } else {
        video.pause();
        playBtn.style.backgroundImage = "url(play.png)";
    }
}

playBtn.addEventListener('click', togglePlay);
video.addEventListener('click', togglePlay);

这里我们使用了video的paused属性来判断视频状态，如果是暂停状态，则使用video的play()方法进行播放，如果是播放状态，则使用video的pause()方法进行暂停。同时，我们也对playBtn和video元素绑定了click事件。

3. 控制进度条进度

function updateProgressBar() {
    const percent = (video.currentTime / video.duration) * 100;
    progressBar.style.width = `${percent}%`;
}

video.addEventListener('timeupdate', updateProgressBar);

这里我们使用了video元素的currentTime和duration属性，来计算视频播放进度的百分比，并将其赋值给progressBar元素的宽度。

4. 控制音量

function toggleVolume() {
    if (video.volume === 0) {
        video.volume = 1;
        volumeBtn.style.backgroundImage = "url(volume.png)";
        volumeBar.style.width = '100%';
    } else {
        video.volume = 0;
        volumeBtn.style.backgroundImage = "url(mute.png)";
        volumeBar.style.width = '0';
    }
}

volumeBtn.addEventListener('click', toggleVolume);

let isDraggingVolume = false;
volumeSlider.addEventListener('mousedown', () => {
    isDraggingVolume = true;
});
volumeSlider.addEventListener('mouseup', () => {
    isDraggingVolume = false;
});
volumeSlider.addEventListener('mousemove', e => {
    if (isDraggingVolume) {
        const volumePosition = e.clientX - volumeSlider.getBoundingClientRect().left;
        const volumePercent = volumePosition / volumeSlider.offsetWidth;

        video.volume = volumePercent;
        volumeBar.style.width = `${volumePercent * 100}%`;

        if (volumePercent === 0) {
            volumeBtn.style.backgroundImage = "url(mute.png)";
        } else {
            volumeBtn.style.backgroundImage = "url(volume.png)";
        }
    }
});

这里我们使用了video元素的volume属性，来控制视频的音量，同时给volumeSlider元素添加了mousedown、mouseup、mousemove事件，实现拖动控制音量的效果。

5. 控制全屏

function toggleFullscreen() {
    if (document.webkitFullscreenElement === null) {
        video.webkitRequestFullScreen();
    } else {
        document.webkitCancelFullScreen();
    }
}

fullscreenBtn.addEventListener('click', toggleFullscreen);

这里我们使用了video元素的webkitRequestFullScreen()方法，并判断当前是否全屏，如果是全屏，则使用document的webkitCancelFullScreen()方法退出全屏。

三、示例说明

下面我将演示两个HTML5自定义视频播放器的例子，希望能帮助你更好理解。

1. 带播放列表的视频播放器

在上面的HTML文档中，我们只有一个视频，如果我们需要展示多个视频，并给用户提供切换的功能，就可以添加一个播放列表。

<div class="video-player">
    <video class="video" src="./video/sample.mp4"></video>
    <div class="controls">
        <button class="play-btn"></button>
        <div class="progress">
            <div class="progress-bar"></div>
        </div>
        <button class="volume-btn"></button>
        <div class="volume-slider">
            <div class="volume-bar"></div>
        </div>
        <button class="fullscreen-btn"></button>
    </div>
    <div class="playlist">
        <ul>
            <li class="active"><a href="javascript:void(0)" data-src="./video/sample.mp4">视频1</a></li>
            <li><a href="javascript:void(0)" data-src="./video/sample2.mp4">视频2</a></li>
            <li><a href="javascript:void(0)" data-src="./video/sample3.mp4">视频3</a></li>
        </ul>
    </div>
</div>

我们给.video-player下添加了一个.playlist，在该元素下，我们添加了一个ul列表，每个li元素里存放一个a标签，通过a标签的data-src属性可以指定该视频的地址。在播放视频时，我们只要通过js切换video的src属性即可。

.playlist {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    background: #444;
    color: #fff;
    font-size: 14px;
}

.playlist ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    padding: 10px;
    flex-wrap: wrap;
}

.playlist li {
    padding: 5px;
    font-size: 16px;
}

.playlist a {
    color: #fff;
    text-decoration: none;
}

.playlist .active a {
    font-weight: 700;
    border-bottom: 1px solid #fff;
}

同时，我们在CSS样式中给.playlist添加了样式，使其展示在视频播放器的下方，并为.a元素添加了data-src属性。

const playlist = document.querySelector('.playlist');
const playlistItems = playlist.querySelectorAll('li');
const videoSrc = playlistItems[0].querySelector('a').getAttribute('data-src');

playlistItems.forEach(item => {
    item.addEventListener('click', () => {
        const videoSrc = item.querySelector('a').getAttribute('data-src');

        video.src = videoSrc;

        playlistItems.forEach(item => item.classList.remove('active'));
        item.classList.add('active');

        video.play();
    })
});

在JavaScript代码中，我们通过querySelectorAll()方法获取playlist下的所有li元素，为每个li绑定click事件，在点击时切换video的src属性，并播放视频。

2. 带视频标题的视频播放器

在上面的HTML文档中，我们只有一个视频，如果我们需要给用户展示当前播放视频的标题或者一些其他信息，就可以添加一个标题等其他元素。

<div class="video-player">
    <div class="video-title">HTML5自定义视频播放器</div>
    <video class="video" src="./video/sample.mp4"></video>
    <div class="controls">
        <button class="play-btn"></button>
        <div class="progress">
            <div class="progress-bar"></div>
        </div>
        <button class="volume-btn"></button>
        <div class="volume-slider">
            <div class="volume-bar"></div>
        </div>
        <button class="fullscreen-btn"></button>
    </div>
</div>

这里我们给.video-player添加了一个.video-title元素，并在其中显示了当前播放视频的标题。

.video-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    padding-left: 20px;
    box-sizing: border-box;
}

同时，我们在CSS样式中给.video-title添加了样式，使其展示在视频的上方，并显示为半透明黑色背景，字体为白色。

const videoTitle = document.querySelector('.video-title');
const videoSrc = video.src.split('/').pop().split('.')[0];
videoTitle.innerHTML = videoSrc;

在JavaScript设置当前播放视频的标题，我们使用video的src属性获取视频地址，通过分割字符串来截取视频文件名，然后给.video-title元素赋值即可。

总结

HTML5自定义视频播放器是一种非常实用的技术，通过代码的实现，我们可以自己制作一个可定制的视频播放器，满足不同需求。本文从结构、样式、JavaScript三部分详细介绍可以制作一个完整的视频播放器，并且给出了两个示例来帮助更好的理解。

如果你对HTML5自定义视频播放器有更深层次的需求和开发，那么这里的代码实现只是一个开始，你还可以添加更多的功能，进行更详细的的设计完善。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML5自定义视频播放器源码 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JS实现的自动打字效果示例

    接下来我将为你讲解“JS实现的自动打字效果示例”的完整攻略。 这是一个比较常见的网页效果，可以使用 JavaScript 来实现。整个过程大体可分为以下几个步骤： 步骤一：准备 HTML 结构 首先，你需要准备一个包含文字内容的 HTML 元素，例如： <div id="text"> <p>这是一段文本内容，我们将…

    JavaScript 2023年5月28日
    00

  • 一文了解JavaScript用Element Traversal新属性遍历子元素

    一文了解JavaScript用Element Traversal新属性遍历子元素 什么是Element Traversal？ Element Traversal是指DOM中用于遍历子元素的标准API，它包含了一系列用于访问当前DOM元素子元素的属性，其中最常用的就是children和firstElementChild等。 children属性 childre…

    JavaScript 2023年6月10日
    00

  • 基于JavaScript中字符串的match与replace方法(详解)

    基于JavaScript中字符串的match与replace方法(详解) 1. match方法 match 方法用于在字符串中查找一个或多个匹配正则表达式的字串。 1.1 方法语法 string.match(regexp); 1.2 方法参数 regexp参数是一个正则表达式对象。如果传入的参数不是正则表达式对象，将被自动转换为正则表达式对象。 1.3 方法…

    JavaScript 2023年5月28日
    00

  • 原生JS实现图片无缝滚动方法(附带封装的运动框架)

    下面是对“原生JS实现图片无缝滚动方法(附带封装的运动框架)”的完整攻略。 1. 实现图片无缝滚动的基本思路 实现图片无缝滚动，是需要对图片进行滚动并将其无限循环的。具体的实现思路如下： 创建一个容器，设置其宽度为图片的总宽度。 手动复制一份图片，将其添加到容器的最后。 定时器每次移动容器的left值，实现滚动效果。 当容器的left值达到任何一张图片的边界…

    JavaScript 2023年6月11日
    00

  • 微信小程序可滑动月日历组件使用详解

    下面是关于“微信小程序可滑动月日历组件使用详解”的完整攻略： 一、安装 安装这个可滑动月日历组件很简单，只需要使用npm进行安装即可： npm i calendar-month 二、引用组件 在需要使用月日历组件的页面中，引用月日历组件的wxml文件路径，并在js文件中绑定对应的组件属性即可： <!– 日历组件 –> <calendar…

    JavaScript 2023年6月10日
    00

  • JavaScript Date对象 日期获取函数

    JavaScript Date对象是处理日期和时间的首选方式之一。Date对象的实例从内部保存为UTC格式的整数，它代表1970年1月1日UTC（协调世界时）午夜至当前日期时间间的毫秒数。Date对象提供了许多方法来获取日期，包括年、月、日、小时、分钟和秒等。下面是Date对象日期获取函数的完整攻略： 1. 获取完整日期时间 使用Date对象的toStrin…

    JavaScript 2023年5月27日
    00

  • JS 两个字符串时间的天数差计算

    当我们需要计算两个字符串表示的时间之间相差的天数时，我们需要先将字符串转换为日期对象，比较两个日期对象之间的天数差。 以下是详细的步骤： 步骤一：将字符串转换为日期对象 使用Date()方法将字符串转换为日期对象，语法如下： var date1 = new Date(‘2019-01-01’); var date2 = new Date(‘2019-01-0…

    JavaScript 2023年5月27日
    00

  • 原生js实现表单的正则验证（验证通过后才可提交）

    下面是原生js实现表单的正则验证的完整攻略，分为以下几个步骤： 1. 前置知识 在实现表单的正则验证之前，需要先了解表单的基本结构和事件绑定的方法。 表单基本结构 <form> <input type="text" name="username" id="username">…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部