私人博客

許小墨のBlog —— 菜雞博客直通車

系列文章完整版，配圖更多，CSDN博文圖片需要手動上傳，因此文章配圖較少，看不懂的可以去菜雞博客參考一下配圖！

系列文章目錄

前端系列文章——傳送門
后端系列文章——傳送門

多媒體標(biāo)簽

video

只接受幾種視屏格式：ogg、mp4、avi

基本使用：

<video src="視屏文件路徑"></video>
<!-- 兼容寫法 -->
<video>
    <source src="路徑1" type="video/mp4"></source>
    <source src="路徑2" type="video/ogg"></source>
    <source src="路徑3" type="video/avi"></source>
</video>

controls屬性，出現(xiàn)默認(rèn)的控制面板

autoplay屬性，自動播放

loop屬性，循環(huán)播放

width和height屬性，用來設(shè)置視屏可視區(qū)域的尺寸，但是寬和高一直會保持等比，所以設(shè)置一個就行了，如果都設(shè)置了，會出現(xiàn)黑邊，但可視區(qū)域是等比的

audio

只接受ogg和mp3格式，使用方式和video是一樣的

<audio src="視屏文件路徑"></audio>
<!-- 兼容寫法 -->
<audio>
    <source src="路徑1" type="audio/mp3"></source>
    <source src="路徑2" type="audio/ogg"></source>
</audio>

controls屬性，出現(xiàn)默認(rèn)的控制面板

autoplay屬性，自動播放

loop屬性，循環(huán)播放

多媒體標(biāo)簽的API

在谷歌瀏覽器中，默認(rèn)不能自動播放，默認(rèn)直接調(diào)用play方法播放，需要一個自定義按鈕來解決或設(shè)置video靜音

/* 方法 */
video/audio.play() // 播放
video/audio.pause() // 暫停
/* 屬性 */
video.duration // 視屏總時(shí)長
video.muted // 設(shè)置媒體靜音，值為true或false，獲取媒體是否靜音
video.volume // 獲取媒體當(dāng)前聲音(0~1)，設(shè)置聲音(0~1)
video.currentTime // 獲取媒體當(dāng)前時(shí)間，設(shè)置當(dāng)前時(shí)間，單位秒
video/audio.paused // 查看媒體是否暫停
video/audio.playbackRate // 獲取/設(shè)置播放倍速
/* 事件 */
loadstart：視屏開始加載時(shí)觸發(fā)
progress：瀏覽器正在下載視屏?xí)r觸發(fā) - 相當(dāng)于在加載
canplay：媒體加載完畢，可以播放的時(shí)候觸發(fā)
play：視屏正在播放的時(shí)候觸發(fā)
pause：視屏?xí)和５臅r(shí)候觸發(fā)
seeking：視屏開始要跳到新位置的時(shí)候觸發(fā)
seeked：視屏已經(jīng)跳到新位置的時(shí)候觸發(fā)
waiting：視屏加載等待時(shí)觸發(fā)
timeupdate：只要播放時(shí)間更改就會觸發(fā)
ended：媒體播放結(jié)束時(shí)觸發(fā)
error：視屏播放錯誤時(shí)觸發(fā)
volumechange：視屏音量改變時(shí)觸發(fā)
ratechange：視屏播放速度更改時(shí)觸發(fā)

自定義多媒體控件

布局

<div class="media">
    <div class="playOrPause">
        <i class="iconfont icon-zanting"></i>
    </div>
    <div class="time">
        <span class="currentMinute">00</span>
        :
        <span class="currentSecond">00</span>
        /
        <span class="durationMinute">00</span>
        :
        <span class="durationSecond">00</span>
    </div>
    <div class="playRange">
        <div class="currentRange"></div>
        <div class="playBtn"></div>
    </div>
    <div class="volume">
        <div class="volumeRange">
            <div class="currentVolume"></div>
            <div class="volumeBtn"></div>
        </div>
        <i class="iconfont icon-volume"></i>
    </div>
</div>

樣式

.media{
    width: 800px;
    height: 50px;
    border:3px solid #bbb;
    margin:300px auto;
}
.media>div{
    float:left;
    line-height: 50px;
    margin:0 10px;
}
.media>div.playRange{
    width: 200px;
    height: 6px;
    background-color: #333;
    margin:22px 10px;
    border-radius:3px;
    position: relative;
}
.media>div.playRange .currentRange{
    width: 100px;
    height: 6px;
    background-color: rgb(9, 143, 153);
    position:absolute;
    left: 0;
    top: 0;
}
.media>div.playRange .playBtn{
    width: 20px;
    height: 20px;
    background-color:rgb(9, 143, 153);
    border-radius:50%;
    position: absolute;
    left: 90px;
    top: -7px;
}
.media .volume{
    position:relative;
}
.media .volumeRange{
    width: 4px;
    height: 100px;
    background-color: #333;
    border-radius:2px;
    position:absolute;
    top:-100px;
    left: 10px;
    display:none;
}
.media .volumeRange .currentVolume{
    width: 4px;
    height: 50px;
    background-color: blue;
    border-radius:2px;
    position:absolute;
    left: 0;
    bottom:0;
}
.media .volumeRange .volumeBtn{
    width: 15px;
    height: 15px;
    border-radius:50%;
    background-color: blue;
    position:absolute;
    left: -5px;
    bottom:40px;
}
.media i{
    font-size: 24px;
}

js效果：

// 控制音量的面板顯示隱藏
$('.media .volume').hover(function(){
    $(this).find('.volumeRange').show()
},function(){
    $(this).find('.volumeRange').hide()
})

// 點(diǎn)擊切換小圖標(biāo)
$('.media .playOrPause i').click(function(){
    if($(this).hasClass('icon-bofang')){
        $(this).removeClass('icon-bofang').addClass('icon-zanting')
        // 多媒體播放
        $('audio')[0].play()
    }else{
        $(this).removeClass('icon-zanting').addClass('icon-bofang')
        // 多媒體暫停
        $('audio')[0].pause()
    }
})
$('.media .volume i').click(function(){
    if($(this).hasClass('icon-volume')){
        $(this).removeClass('icon-volume').addClass('icon-jingyin')
        // 讓多媒體靜音
        $('audio')[0].muted = true
        // 讓音量小球下來
        $('.currentVolume').height(0)
        console.log(-$('.volumeBtn').height()/2)
        $('.volumeBtn').css('top',$('.volumeRange').height()-$('.volumeBtn').height()/2 + "px")
    }else{
        $(this).removeClass('icon-jingyin').addClass('icon-volume')
        // 取消靜音
        $('audio')[0].muted = false
    }
})
// 拖拽播放進(jìn)度
$('.playRange').mousedown(function(e){
    // 讓小球過來 - 獲取光標(biāo)按下的位置，計(jì)算小球的left
    var x = e.pageX;
    var left = x - $('.playBtn').width()/2;
    $('.playBtn').offset({left})
    var width = $('.playBtn').position().left + $('.playBtn').width()/2
    $('.currentRange').width( width )
    // // 根據(jù)當(dāng)前拖拽好的位置設(shè)置多媒體
    // // 比例 = 當(dāng)前播放過的進(jìn)度條長度 / 進(jìn)度條總長度
    var percent = width / $('.playRange').width()
    // 當(dāng)前播放時(shí)長 = 總時(shí)長*比例
    var duration = $('audio')[0].duration;
    var currentTime = percent * duration;

    $('audio')[0].currentTime = currentTime;
    // $('audio')[0].pause()
    // 移動
    $(this).mousemove(function(e){
        // 讓小球過來 - 獲取光標(biāo)按下的位置，計(jì)算小球的left
        var x = e.pageX;
        var left = x - $('.playBtn').width()/2;
        $('.playBtn').offset({left})
        var width = $('.playBtn').position().left + $('.playBtn').width()/2
        $('.currentRange').width( width )
        $('audio')[0].pause()
        $('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')
    })
})
$('.playRange').mouseup(function(e){
    $('.playRange').off('mousemove')
    var width = $('.currentRange').width()
    // 根據(jù)當(dāng)前拖拽好的位置設(shè)置多媒體
    // 比例 = 當(dāng)前播放過的進(jìn)度條長度 / 進(jìn)度條總長度
    var percent = width / $('.playRange').width()
    // 當(dāng)前播放時(shí)長 = 總時(shí)長*比例
    var duration = $('audio')[0].duration;
    var currentTime = percent * duration;
    $('audio')[0].currentTime = currentTime;
    $('audio')[0].play()
    $('.media .playOrPause i').removeClass('icon-bofang').addClass('icon-zanting')
})

// 拖拽音量
$('.volumeRange').mousedown(function(e){
    // 讓小球過來 - 獲取光標(biāo)按下的位置，計(jì)算小球的left
    var y = e.pageY;
    var top = y - $('.volumeBtn').width()/2
    $('.volumeBtn').offset({top})
    $('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )
    // 計(jì)算音量的比例
    var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0
    $('audio')[0].volume = volume

    $(this).mousemove(function(e){
        var y = e.pageY;
        var top = y - $('.volumeBtn').width()/2
        $('.volumeBtn').offset({top})
        $('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )
        // 計(jì)算音量的比例
        var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0
        $('audio')[0].volume = volume
    })
})
$(document).mouseup(function(e){
    $('.volumeRange').off('mousemove')
})

// 當(dāng)多媒體加載完成的時(shí)候獲取多媒體的播放時(shí)長
$('audio')[0].addEventListener('canplay',canplay)
function canplay(){
    var duration = this.duration; // 秒
    // 換算成分鐘和秒
    var minute = parseInt(duration/60)
    var second = parseInt(duration%60);
    minute = minute<10?'0'+minute:minute;
    second = second<10?'0'+second:second;
    $('.durationMinute').text(minute)
    $('.durationSecond').text(second)
    // 將播放進(jìn)度小球放到0的位置
    $('.playBtn').css('left',-$('.playBtn').width()/2 + "px")
    $('.currentRange').width(0)
    // 將音量設(shè)置在最頂端
    $('.volumeBtn').css('top',-$('.volumeBtn').height()/2 + "px")
    $('.currentVolume').height($('.volumeRange').height())
}

// 正在播放過程中獲取當(dāng)前播放的時(shí)長
$('audio')[0].addEventListener('timeupdate',timeupdate)
function timeupdate(){
    // 獲取 當(dāng)前時(shí)長
    var currentTime = this.currentTime;
    var minute = parseInt(currentTime/60)
    var second = parseInt(currentTime%60);
    minute = minute<10?'0'+minute:minute;
    second = second<10?'0'+second:second;
    $('.currentMinute').text(minute)
    $('.currentSecond').text(second)
    // 計(jì)算當(dāng)前播放過多少的比例
    var duration = this.duration; 
    var percent = currentTime / duration;
    // 計(jì)算播放過的進(jìn)度條的長度
    var width = $('.playRange').width() * percent;
    $('.currentRange').width(width)
    $('.playBtn').css('left',width-$('.playBtn').width()/2 + "px")
}

// 多媒體播放結(jié)束
$('audio')[0].addEventListener('ended',ended)
function ended(){
    $('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')
}

注

本博文缺失大量圖片，嚴(yán)重影響內(nèi)容完整性以及閱讀體驗(yàn)，完整內(nèi)容請前往本人菜雞博客——許小墨のBlog文章來源地址http://www.zghlxwxcb.cn/news/detail-432029.html

到了這里，關(guān)于多媒體API的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！