国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從零實現一個自定義html5播放器

張遷 / 425人閱讀

摘要：寫在最前本次的分享是一個基于標簽實現的一個自定義視頻播放器。其中實現了播放暫停進度拖拽音量控制及全屏等功能。核心思路我相信一定會有些沒有接觸過制作自定義播放器的童鞋對于標簽的認識會停留在此。整個視頻播放器的基礎功能實現的還算完善。

寫在最前

本次的分享是一個基于HTML5標簽實現的一個自定義視頻播放器。其中實現了播放暫停、進度拖拽、音量控制及全屏等功能。
歡迎關注我的博客，不定期更新中——

效果預覽


畫面卡頓請看這個地址
https://user-gold-cdn.xitu.io...
點我查看源碼倉庫。

核心思路

我相信一定會有些沒有接觸過制作自定義播放器的童鞋對于標簽的認識會停留在此。

其中controls屬性經過設定，會在界面中顯示一個瀏覽器自帶的控制條。如果對于UI沒有要求的需求，其內置控制器已經可以滿足大部分的需求。當然了如果是這樣你們也不會看到這篇分享了=。=

隱藏控制條并模擬

那么實現一個自定義功能的播放器關鍵就在于，我們不使用原生的控制器，將其隱藏掉之后，在下方同樣的位置通過html、css來模擬所需樣式，同時通過js來調用vedio標簽所暴露給我們的接口函數及屬性，以及檢測用戶的操作行為來同步的模擬UI與視頻播放數據的相應變化。

幾個核心函數及屬性的用法 
myVid=document.getElementById("video1");
//控制視頻開關
myVid.play() //播放
myVid.pause() //暫停
//模擬視頻進度條
myVid.currentTime=5; //返回或設定當前視頻播放位置
myVid.duration // 返回視頻總長度
//模擬視頻音量
myVid.volume //音量
//獲取視頻當前狀態后判斷何時從loading切換為播放
myVid.readyState
//0 = HAVE_NOTHING - 沒有關于音頻/視頻是否就緒的信息
//1 = HAVE_METADATA - 關于音頻/視頻就緒的元數據
//2 = HAVE_CURRENT_DATA - 關于當前播放位置的數據是可用的，但沒有足夠的數據來播放下一幀/毫秒
//3 = HAVE_FUTURE_DATA - 當前及至少下一幀的數據是可用的
//4 = HAVE_ENOUGH_DATA - 可用數據足以開始播放

在所有實現中的關鍵點，較為繁瑣的是對于進度條的模擬。其中使用了video標簽中的currentTime以及duration屬性，通過當前播放時間與總播放時間的比值，就可以計算出進度條相對于總長的位置。同時用戶通過拖拽進度條所最后設置的長度也可以用來反向推算出此時視頻應該播放的位置。

拖拽代碼思路 
//核心代碼示例
var dragDis = 0
var processWidth = xxx //拖拽條總長
$("body").mousedown(function(e) {
    startX = e.clientX
    dragDis = startX - leftInit //leftInit為拖拽條起始點距屏幕左側的距離
    dragTarget.css({ //拖拽按鈕
        left: dragDis
    })
    dragProcess.css({ //進度條(藍色進度條)
        width: dragDis
    }) // 令進度條和拖拽按鈕渲染在同一位置
    videoSource.pause()
}).mousemove(function(e) {
    moveX = e.clientX
    disX = moveX - startX
    var left = dragDis + disX
    if(left > processWidth) {
        left = processWidth
    } else if(left < 0) {
        left = 0
    }
    dragTarget.css({
        left: left
    })
    dragProcess.css({
        width: left
    })
}).mouseup(function(e) {
    videoSource.play()
    videoSource.currentTime = $("藍色拖拽條").width() / processWidth * duration //拖拽后計算視頻的正確播放位置
})

同理音量的控制與其上行為基本一致，故在源碼中作者將音量與進度部分通過不同元素進行判斷是進行進度還是音量的拖拽控制。

通過查詢視頻流狀態控制播放前的加載動畫 
function ifState() {
    var state = videoSource.readyState
    if(state === 4) { //狀態為4即可播放
        videoPlayer()
    } else {
        $(".play-sym-wrapper").remove()
        $("body").append("
")
        //添加loading動畫
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)

核心的控制部分已經說完了，有興趣的同學可以去源碼的html中點擊播放，其中被迫有很多零碎的需求，比如點擊暫停，保存音量等等。整個視頻播放器的基礎功能實現的還算完善。

最后

慣例po作者的博客，不定時更新中——
有問題歡迎在issues下交流。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90677.html

相關文章

  • Day11 - 自定義視頻播放器

    摘要：自定義視頻播放器微信公眾號開發企業級產品全棧開發速成周末班首期班號正式開班，歡迎搶座作者簡介是推出的一個天挑戰。 Day11 - 自定義視頻播放器 (Node+Vue+微信公眾號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座) 作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視...

    SKYZACK 評論0 收藏0

  • 2017-07-20 前端日報

    摘要：前端日報精選入門指南工作原理的新功能前端本地存儲數據庫實例教程模塊深入探究調查問卷中文譯掘金第期構建高性能展開收縮動畫譯代碼檢查工具對比前端之旅譯年了，這么多前端框架，你會怎樣選擇掘金譯不配置，不出事那些坑其一前端面試的大 2017-07-20 前端日報 精選 CSS入門指南-1：工作原理2017 Amsterdam CSS DayWebpack 3 的新功能：Scope Hoisti...

    JessYanCoding 評論0 收藏0

  • larkplayer: 插件化的 HTML5 播放器

    摘要：是一款輕量級易擴展的播放器，是為解決一些中小型的視頻業務場景。同時各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴展的 html5 播放器，是為解決一些中小型的視頻業務場景。這些業務不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。 背景 為什么要編寫 larkplayer？（注意，這里面有...

    lijy91 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<