HTML5+JavaScript实现本地视频/音频播放器

学习&实践爱好者

已于 2024-04-18 08:44:27 修改

阅读量5.5k

点赞数 23

文章标签： html5 音视频前端

于 2024-04-18 06:45:00 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/137808746

版权

HTML5+JavaScript实现本地视频/音频播放器

HTML5 提供了本地视频和音频播放器的支持，通过 <video> 和 <audio> 标签，这些标签支持多种媒体格式，并且可以通过 JavaScript 进行控制，实现功能比较完整的本地视频音频播放器。

HTML5的<video>和<audio>标签是HTML5中新增的两个标签，分别用于在网页播放视频和音频内容。<video>标签主要用于播放视频，同时也支持播放音频。<audio>标签主要用于播放音频，不支持播放视频。

本地视频/音频播放器

使用HTML5的<video>标签实现本地视频/音频播放器

运行效果

源码如下：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>本地视频/音频播放器</title>  
    <style>  
        /* 样式可以根据需要自定义 */  
        #video-player {  
            width: 640px;  
            height: 360px;  
        }  
        #controls {  
            margin-top: 10px;  
        }  
    </style>  
</head>  
<body>  
    <video id="video-player" controls>  
        您的浏览器不支持 Video 标签。  
    </video>  
    <div id="