沃梦达 / 编程技术 / 前端开发 / 正文

HTML5自定义视频播放器源码

前端开发
2024-01-03

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

下面我将详细讲解“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自定义视频播放器源码

上一篇： Dreamweaver 网页制作的技巧
下一篇： 基于Html+CSS+JS实现手动放烟花效果

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2