zoukankan      html  css  js  c++  java

  • audio标签的样式修改

    由于H5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，那么要怎么改变这个样式呢，其实它的原理比较简单，就是把写audio的时候不要用controls属性，隐藏原生的audio， 然后用div之类标签，定义css样式美化起来用来显示播放器的效果，最后用js捕获audio事件，基本就是src路径、pause暂停、load加载、play播放这些。下面是audio标签的一些相关API：

    控制函数功能说明

    • load()：加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
    • play()：加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
    • pause()：暂停处于播放状态的音频、视频文件

    audio 可脚本控制的特性值

    src：音频文件路径。
    autoplay：设置音频是否自动播放 （默认有此属性为自动播放已经加载的的媒体文件），或查询是否已设置为autoplay
    autobuffer：设置是否在页面加载时自动缓冲音频，如果设置了autoplay，则忽略此特性
    loop：设置音频是否要循环播放。，或查询是否已设置为loop
    currentTime：以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置 controls：
    显示或者隐藏用户控制界面（属性供添加播放、暂停和音量控件。 ） volume：在0.0到1.0间设置音量值，或查询当前音量值
    muted：设置是否静音

    controls ： 是否显示播放控件，不同的浏览器的控件外观不相同
    duration ： 影片总时长(s)
    ended: 是否播放到最后结尾了
    muted：是否静音
    volumn: 0~1 音量设置，默认是最大值，且是js对象的属性，不能在标签上直接写
    pasued : 当期那是否处于暂停状态
    poster: 指定视频第一帧播放前的电影海报
    preload 值视频预加载的方案
        > 取值：metadata 元数据，只预加载视频的宽度、时长、第一帧内容
        >      auto  自动预加载、时长、第一帧内容、并缓冲一定时长
        >      none:不预加载任何内容 

    只读属性属性说明

    1. duration：获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
    2. paused：如果媒体文件被暂停，则返回true，否则返回false
    3. ended：如果媒体文件播放完毕，则返回true
    4. startTime：返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
    5. error：在发生了错误后返回的错误代码
    6. currentSrc：以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

    对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3。幸好Google的chrome都支持。

    代码如下：

    <style>
             *{
                margin:0;
                padding:0;
                box-sizing:border-box;
                -webkit-tap-highlight-color:transparent;
            }
            body{
                background:#2b2938;
            }
            .btn-audio{
                margin: 90px auto;
                 186px;
                height: 186px;
                background:url(images/voice_stop.png) no-repeat center bottom;
                background-size:cover;
            }
        </style>
    </head>
    <body>
         <div class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></div>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
        <script>
        $(function(){
            //播放完毕
            $('#mp3Btn').on('ended', function() {
                console.log("音频已播放完成");
                $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
            })
            //播放器控制
            var audio = document.getElementById('mp3Btn');
            audio.volume = .3;
            $('.btn-audio').click(function() {
                event.stopPropagation();//防止冒泡
                if(audio.paused){ //如果当前是暂停状态
                    $('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'});
                    audio.play(); //播放
                    return;
                }else{//当前是播放状态
                    $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
                    audio.pause(); //暂停
                }
            });
        })
        </script>
    通过以上方法，audio的样式修改的问题就解决啦，你可以换成你想要的显示效果。

    自定义播放器

    HTML 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义播放器</title>
    <link rel="stylesheet" href="./css/zidingyi.css">
</head>

<body>
    <div class="box">
        <video src="http://edge.ivideo.sina.com.cn/35267794003.mp4?KID=sina,viask&Expires=1600876800&ssig=S8%2B5ZV4tJU&reqid="></video>
        <div class="menu">
            <!-- 播放器 -->
            <div class="play">播放</div>
            <!-- 时间 -->
            <div class="timer">0:0/0:0</div>
            <!-- 进度条 -->
            <div class="progressBar">
                <!-- 播放进度 -->
                <div></div>
                <!-- 播放的标记 -->
                <i></i>
            </div>
            <!-- 倍数 -->
            <div class="times">倍数</div>
            <div class="time-ul">
                <ul>
                    <li>2</li>
                    <li>x1.5</li>
                    <li>x1.25</li>
                    <li>正常</li>
                </ul>
            </div>
            <div class="vol add">音量加</div>
            <div class="vol event">音量减</div>
        </div>
    </div>
    <script src="./js/zidingyi.js"></script>
</body>

</html>

    　JS

    var oVideo = document.querySelector('video');
var oPlay = document.querySelector('.play');
var time = document.querySelector('.timer');
var oProgressbar = document.querySelector('.progressBar');
var oTimes = document.querySelector('.times');
var ul = document.querySelector('.time-ul');
var li = ul.getElementsByTagName('li');
var oAdd = document.querySelector('.add');
var oEvent = document.querySelector('.event');


// 点击播放或者暂停
oPlay.onclick = function() {
    if (oVideo.paused) {
        oVideo.play();
        this.innerHTML = '暂停';
    } else {
        oVideo.pause();
        this.innerHTML = '播放';
    }
}

// 时间
setInterval(function() {
    // 总时长
    var total = oVideo.duration;
    var nowtime = oVideo.currentTime;
    // 时间显示到页面
    time.innerHTML = parseInt(nowtime / 60) + ":" + String(parseInt(nowtime % 60)).padStart(2, 0) + '/' + parseInt(total / 60) + ':' + String(parseInt(total % 60)).padStart(2, 0);

    // 当前进度条的宽度
    var width = nowtime / total * oProgressbar.clientWidth;
    oProgressbar.getElementsByTagName('div')[0].style.width = width + 'px';
    oProgressbar.getElementsByTagName('i')[0].style.width = width + 'px';

}, 1000)

// 进度条
oProgressbar.onmouseenter = function() {
    this.style.height = '14px';
    this.style.top = '-14px';
    this.getElementsByTagName('div')[0].style.height = '14px';
    this.getElementsByTagName('i')[0].style.height = '18px';
}

oProgressbar.onmouseleave = function() {
    this.style.height = '2px';
    this.style.top = '-2px';
    this.getElementsByTagName('div')[0].style.height = '2px';
    this.getElementsByTagName('i')[0].style.height = '6px';
}

// 点击进度条，跳转进度
oProgressbar.onclick = function(e) {
    var location = e.layerX;
    var width = this.clientWidth;
    // 计算出目标时间
    var targetTime = location / width * oVideo.duration;
    // 设置当前时间
    oVideo.currentSrc = targetTime;
}

// 倍数
oTimes.onclick = function() {
    ul.style.display = 'block';
}
ul.onmouseleave = function() {
    ul.style.display = 'none';
}

// 给每一个li注册点击事件
for (var i = 0; i < li.length; i++) {
    // 下标
    li[i].index = i;
    li[i].onclick = function() {
        switch (this.index) {
            case 0:
                // 两倍
                oVideo.playbackRate = 2;
                oTimes.innerHTML = 'x2';
                break;
            case 1:
                // 1.5倍
                oVideo.playbackRate = 1.5;
                oTimes.innerHTML = 'x1.5';
                break;
            case 2:
                // 1.25倍
                oVideo.playbackRate = 1.25;
                oTimes.innerHTML = 'x1.25';
                break;
            default:
                // 正常
                oVideo.playbackRate = 1;
                oTimes.innerHTML = '倍数';
                break;
                break;
        }
    }

}
// 音量
oAdd.onclick = function() {
    oVideo.volume = oVideo.volume + 0.1 >= 0 ? 0 : oVideo.volume + 1
}
oEvent.onclick = function() {
    oVideo.volume = oVideo.volume - 0.1 <= 0 ? 0 : oVideo.volume - 1
}

    　　CSS

    * {
    margin: 0;
    padding: 0;
}

.box {
     598px;
    height: 280px;
    border: 1px solid black;
    position: relative;
    margin: 100px auto;
}

video {
    position: absolute;
     598px;
    height: 280px;
}

.menu {
    position: absolute;
     100%;
    height: 50px;
    margin-top: 230px;
    background-color: rgb(0, 0, 0, .5);
}

.play {
    border: 1px solid #fff;
     50px;
    height: 28px;
    border-radius: 8px;
    position: absolute;
    margin-top: 12px;
    margin-left: 20px;
    line-height: 26px;
    text-align: center;
    color: #fff;
}

.timer {
     50px;
    height: 28px;
    border-radius: 8px;
    position: absolute;
    margin-top: 12px;
    margin-left: 120px;
    line-height: 26px;
    text-align: center;
    color: #fff;
}

.times {
    border: 1px solid #fff;
     50px;
    height: 28px;
    border-radius: 8px;
    position: absolute;
    margin-top: 12px;
    margin-left: 400px;
    line-height: 26px;
    text-align: center;
    color: #fff;
}

.progressBar {
    position: absolute;
     100%;
    height: 2px;
    background-color: gray;
    top: -2px;
    left: 0;
}

.progressBar div {
    position: absolute;
    height: 2px;
    background-color: #f40;
     120px;
    left: 0;
    top: 0;
}

.progressBar i {
    position: absolute;
     6px;
    height: 6px;
    border-radius: 3px;
    background-color: #fff;
    left: 120px;
    top: -2px;
}

.time-ul {
    position: absolute;
     90px;
    height: 100px;
    top: -110px;
    left: 380px;
    background-color: rgb(0, 0, 0, .5);
    display: none;
}

.time-ul li {
    display: inline-block;
     100%;
    height: 25px;
    line-height: 25px;
    text-align: center;
}

.time-ul li:hover {
    color: #f40;
    font-weight: bold;
}

.vol {
    position: absolute;
     50px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    color: #fff;
    top: 50%;
    margin-top: -15px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #fff;
}

.add {
    left: 470px;
}

.event {
    left: 530px;
}

    　　
  • 相关阅读:
    ☀【CSS3】形状
    ♫【MV*】
    ☀【布局】多栏布局 / 盒布局
    2017 无奈的模拟赛 1
    洛谷——P2093 零件分组
    洛谷——P1209 [USACO1.3]修理牛棚 Barn Repair
    洛谷——P2695 骑士的工作
    洛谷——P1330 封锁阳光大学
    python（16）- python内置函数
    MTK平台缩写
  • 原文地址：https://www.cnblogs.com/zycs/p/13770601.html
Copyright © 2011-2022 走看看