過去的十多年中,Flash和Silverlight等插件在瀏覽器中實現了豐富的視頻功能,比如為外國YouTube和Netflix等流行服務提供了強大動力,但是,這種視頻播放功能方法在過去幾年中已轉向HTML5。
?
近我在使用的一款簡單容易集成的 web 視頻播放組件,支持播放 B站彈幕。
DPlayer 是一款基于 JavaScript 的 HTML5 彈幕視頻播放器,用于在 web 開發中實現視頻播放的功能,可以讓開發者輕松在 web 應用中嵌入視頻。
DPlayer 官網
現在以視頻作為傳播媒體的內容仍然處在一個非常火熱的發展階段,不知道常來我網站逛的各位開發者有沒有遇到要在項目中集成視頻播放的需求,我之前也用過 Tiny Player 這款小巧的播放器,不過支持的功能比較單一;而強大一點的 xgplayer 不支持彈幕,而這次需求要支持彈幕,無法滿足需求。
DPlayer 文檔
于是就花時間找了一下,發現了 DPlayer 這款播放器非常合適,于是順便寫一篇文章來推薦給大家。
流媒體格式:
視頻文件格式:
以 npm 為例,以及在 Vue.js 項目中使用:
npm install dplayer --save
Vue 頁面中引入:
<template>
<div id="video"></div>
</template>
<script>
import DPlayer from 'dplayer';
// ... 省略無關代碼,初始化播放器
const dp=new DPlayer({
container: document.getElementById('video'),
video: {
url: 'https:///xxx.xxxx.mp4', // 視頻地址
},
});
</script>
這就完成一個基礎播放器了,非常簡單。當然 DPlayer 支持的功能也很多,官網提供了中文文檔,寫得很詳細,并且都配套了代碼例子,這里就不做過多示例了,在簡單理解視頻播放原理的前提下,幾乎不需要學習就能輕松集成到項目中,親測在手機端也可以使用。
DPlayer 參數列表
DPlayer 是一個免費開源的 HTML5 視頻播放器,由來自國內的開發者 DIYgod 開發,項目采用 MIT 開源協議,源碼托管在 Github 上,任何人都可以免費下載來使用和修改,也能用于商業項目中。
↓↓點擊查看本次分享的網站。
DPlayer - 免費開源、輕量簡潔的 HTML5 視頻播放器,支持彈幕播放、清晰度切換、倍速播放|那些免費的磚
要完整代碼和視頻請評論后加前端群470593776領取
學習疲憊了,代碼敲累了,聽聽自己做的的音樂播放器,放松與滿足
知識點:for循環語句,DOM概念,元素獲取,動態布局,字符串切割,
節點操作,audio標簽,歌曲監聽事件等
音樂播放器,如果沒有歌詞的話,很容易做的,布局也很簡單,
對于音頻的處理也不難,難點就在于歌詞同步,這一點上,對于
javascript的運用要非常的熟練,建議使用原生js。
開發為了效率要用插件,但是在學習的時候為了扎實基礎,最好用原生js。
以下附上源碼,需要更多企業常用學習案例,項目實戰請加前端免費資料群:470593776
群里有很多學習者,大家一起交流進步!
前端全套免費系統學習資料請評論后加前端群470593776領取
*請認真填寫需求信息,我們會在24小時內與您取得聯系。