HTML5之音频视频播放器（1）

最新推荐文章于 2022-08-06 10:45:02 发布

qq_32468225

最新推荐文章于 2022-08-06 10:45:02 发布

阅读量741

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_32468225/article/details/60313560

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录一下自己学习HTML5音频视频小demo的过程

网页中加入音频：

通过video元素实现。

功能：播放按钮，播放进度条，时间进度，声音开关，声音音量控制，全屏

代码分析：

video属性：

width:视频播放器的宽度，单位像素
height:视频播放器高度，单位像素
autoplay:视频就绪后立即播放
controls:显示浏览器播放的默认控件
poster:显示最初加载时的图片
preload:与页面一同加载，并预备播放（autoplay存在时忽略该属性)
metadata:当前页面加载后仅加载后仅加载音频的元数据
（ value of preload）
loop:某个文件完成播放后重复播放

video元素的3种播放格式

格式
IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

浏览器控件应该包括：

播放
暂停
定位
音量
全屏切换
字幕（如果可用）
音轨（如果可用）

1.在网页中加入已有的视频

<!DOCTYPE HTML>
<html>
<body>
    <header><h2>在网页中加入已有的视频</h2></header>
<video controls poster="../res/BigBuck.png" width="360" height="240" preload="metadata">
    <source src="../res/BigBuck.m4v">
    <source src="../res/BigBuck.webm" type="video/webm">
    <source src="../res/BigBuck.ogv" type="video/ogg">
    该浏览器不支持HTML 5 Video
</video>
</body>
</html>

2.手工DIY简陋音频播放器

使用HTML5中的audio元素实现

功能：播放，暂停，全屏，通过单击列表实现音乐的切换

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style>
    div{ width:300px; }
    ul,li{ list-style:none; }
    ul{ padding:5px; }
    li{                                     
        cursor:pointer;            
        margin-bottom:5px;
        padding:2px 7px 2px 25px;
        line-height:20px;
        border-radius: 3px;                 /* 圆角 */
        -moz-border-radius: 3px;            /* mozilla模式     */
        -webkit-border-radius: 3px;         /*chrome模式下  */
    }
    li:hover{ background-color:#e3e3e3; }   /* 触碰后的背景颜色   */
    .list{                                  /*  播放列表样式 */
        height:150px;
        font-size:15px;
        border: 1px solid #464646; 
        border-radius: 3px;                 /*  */
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background-color: #F5F6F9;
        margin-bottom:10px;
    }
    .run{                                   /* 当前正在播放  */
        background-color:#4BA9E6 !important;  /*！important提高css优先权  */
        background: url(../images/running.gif) no-repeat;
        background-position:4px 3px;
    }
    .box{                                   /*播放器外观 */
        border: 1px solid #464646; 
        border-radius: 3px;                 /*  圆角*/
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        padding: 20px;
        /* 背景色线性渐变 */
        background:-moz-linear-gradient(top,rgb(53, 111, 143),#f6f6f8); /*第一个参数为从上到下，二三两个分别为起始和终止的颜色*/
        background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(53, 111, 143)), to(#f6f6f8));/*百分号里表渐进起点和终点*/
    }
    </style>
</head>
<body>
    <header><h2></h2></header>
    <div class="box">
        <div class="list">
            <!--  -->
            <ul>
                <li class="run">Kalimba.mp3</li>
                <li>MaidWithTheFlaxenHair.mp3</li>
                <li>LightMusic.mp3</li>
            </ul>
        </div>
        <div>
            <!-- 播放器 -->
            <audio src="../res/Kalimba.mp3" controls>
            
            </audio>
        </div>
    </div>
</body>
<script>
    var slice = Array.prototype.slice,
        audio = document.querySelector('audio'),            //音频播放元素
        //    将获取的播放音频元素转化为数组                 
        items = slice.call(document.querySelectorAll('.list li'),0),
        run;
    items.forEach(function (item) {
        item.addEventListener('click', function () {        // 监听元素的click事件 
            run = document.querySelector('li.run');         // 获取当前的播放元素
            run.className = '';                              //取消当前的播放元素
            item.className = 'run';                         // 给当前单击的音频加入正在播放的样式
            // 替换audio的地址为当前单击音频地址
            audio.src = audio.src.replace(run.innerHTML, item.innerHTML);
        });
    });
</script>
</html>

querySelector:H5特有属性，获取标签元素并返回对象

querySelectorAll: 获取元素返回对象，参数遵循css选择器语法

Array.prototype.slice.call(): 将获取的播放列表中的文件元素转化为数组

items.forEach(): 通过循环文件数组监听每个元素的click事件。当用户单击列表文件，给文件添加播放样式类，并重新设置audio的src属性。音乐切换，同时所有的播放状态重置为初始状态

再附上一些audio属性相关知识：

src属性：指定播放的音频文件的地址。

played属性：可以用audio的played属性返回一个TimeRanges对象，从该对象可以得到音频的已播放部分的时间段。

paused属性：可以用audio的paused属性返回一个布尔值，表示该音频是否处于暂停状态。true表示暂停状态，false表示正在播放。

ended属性：可以用audio的ended属性返回一个布尔值，表示是否播放完毕。true表示播放完毕，false表示没有播放完毕。

以上三个属性均为只读属性。

volume属性：读取或修改视频的播放音量，范围是0到1，0为静音，1为最大音量。

muted属性：读取或修改视频的静音状态，true表示处于静音状态，false表示非静音状态。

play方法：用于播放音频。

pause方法：暂停播放。

ended事件：当音频播放结束或停止播放时将触发该事件。

play事件：使用audio元素的play方法播放音频时将触发该事件，或者音频数据下载完毕且audio元素被设为自动播放(autoplay)后，自动播放音频时将触发该事件。

pause事件：当执行了audio元素的pause方法而暂停播放时，将触发该事件。

timeupdate事件：当前播放位置被改变时处罚该事件。我们要注意的是，播放位置的改变可能是音频播放过程中的自然改变也可能是人物手动改变，也可能是由于播放不能连续而发生的跳变。

qq_32468225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5之音频视频播放器（1）

记录一下自己学习HTML5音频视频小demo的过程网页中加入音频：通过video元素实现。功能：播放按钮，播放进度条，时间进度，声音开关，声音音量控制，全屏代码分析： video属性：width:视频播放器的宽度，单位像素height:视频播放器高度，单位像素 autoplay:视频就绪后
复制链接

扫一扫