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

資訊專欄INFORMATION COLUMN

larkplayer: 插件化的 HTML5 播放器

lijy91 / 1510人閱讀

摘要:是一款輕量級易擴展的播放器,是為解決一些中小型的視頻業務場景。同時各插件由于是面向的播放器接口,插件不知道插件的存在,因此能極大地降低各插件功能間的耦合。

larkplayer 是一款輕量級 & 易擴展的 html5 播放器,是為解決一些中小型的視頻業務場景。這些業務不一定需要大而全的解決方案,并且他們往往有自己的定制化需求。

背景

為什么要編寫 larkplayer?(注意,這里面有一些我的個人觀點)

目前 html5 web player 社區已經比較成熟,videojs 和 jwplayer 等都是優秀的解決方案。然而,社區的兩極分化也比較嚴重:

排名靠前的播放器基本都是一種『大而全』的狀態:功能豐富&定制化,體積動輒幾百K。對于一些相對簡單的業務,還是有點太重了,尤其是在移動端,在做擴展時也可能由于一些已有的功能而礙手礙腳

一些小一點的播放器,往往只是解決了自己特定的業務場景的問題,缺乏擴展性

一些播放器存在對某些大型庫(比如 jQueryAngularJS 等)的依賴,通用性與可移植性不是很好

因此,對于一些中小型的視頻業務場景,其實并沒有一個舒服的播放器方案可供選擇。

思考

如何解決上訴問題?

業務上:

輕量,盡量不提供"多余"的功能,代碼體積小

易擴展,能輕易地支持如廣告、皮膚、統計等各種定制化需求

代碼上:

解決兼容性問題,把瑣碎的細節留在內部,對外接口統一

插件化機制,解耦各功能,提供方便擴展的接口與方式

原生 javascript 編寫,減少對類庫的依賴,便于在各種環境下使用與移植

設計

larkplayer 的靈感來自 videojs,采用插件化的設計:播放器本身只是一個精巧的核心,包含一些必備的機制和 API,其余功能由插件提供。
你可以自由選擇和編寫自己的插件,做到按需取用,漸進增強。在 ugilfy + gzip 后,larkplayer 代碼體積約 12KB.

1. 內部模塊及說明

Html5 模塊負責抹平兼容性問題,對外提供統一的 API

Event 模塊提供事件機制,支持原生事件及自定義事件

Plugin 模塊用于提供插件機制,為各類插件提供基類,約定其接口及運行方式

Util 中包含一些常用的工具方法,比如對 DOM 的一些便捷操作函數

Player 模塊聚合以上模塊,用以實例化播放器以及對外提供接口

2. API 3. 事件機制

事件作為播放器內部核心的溝通機制,為內部的狀態流轉以及后續的擴展提供底層支持。
目前自定義事件系統的實現方式主要有 2 種:

DOM Event:HTML 原生 API,能夠監聽 DOM 相關事件,支持自定義事件,具有捕獲、冒泡機制,需要一些兼容性處理

EventEmitter:JS 實現的事件機制,核心是一套『訂閱發布模式』,允許自定義事件,擁有更加靈活的 API,無法監聽 DOM 相關事件,基本無兼容性問題

由于 DOM Event 能夠監聽 DOM 相關事件,同時冒泡機制對后續 UI 插件的控制有一定的幫助,因此選用其作為自定義事件系統實現的基礎。

通過 DOM Event 實現以下幾類主要功能:

事件監聽

事件注銷

支持自定義事件類型

支持手動觸發事件(通過 JS 觸發而不是用戶交互觸發)

DOM Event 流程可通過下圖概覽:

4. 插件機制

插件是一種常用的『依賴反轉』的方式,使得播放器不必依賴外部或下層組件,而是所有外部插件都依賴播放器本身。
同時各插件由于是面向的播放器接口,插件 A 不知道 插件 B 的存在,因此能極大地降低各插件(功能)間的耦合。

如何設計插件的類型和接口便關系到后續長期的發展,經過業務經驗的總結以及對其他解決方案的參考,總結出以下 3 類插件類型:

UI 插件,DOM 相關,往往是要添加某些樣式或交互,如皮膚、彈幕等

MSE 插件,播放技術相關,基于 Media Source Extension,可擴展播放器對其他視頻類型的支持,如 m3u8、flv 等

其他插件,可以看做是一種保留類型,上述兩種類型無法滿足時,落到此類型,后續某類新的插件高頻出現時,可再次抽離出新的類型

這幾類插件如何運行呢?這里簡單介紹下,具體可以參見設計文檔或源碼。

1.UI 插件

Component 類作為基類,提供事件、DOM 操作工具函數支持,可獲取到播放器引用

組件化的方式開發,通過構建工具與代碼配合,支持 JSX 語法

可在播放器初始化時傳遞參數,以及從播放器上獲取插件實例

2.MSE 插件

MSEHandler 類作為基類,提供事件支持,可獲取播放器引用,給予修改播放器 play 等方法的權限

可在播放器初始化時傳遞參數,以及從播放器上獲取插件實例

3.其他插件

Plugin 類作為基類,提供事件支持,可獲取播放器引用

可在播放器初始化時傳遞參數,以及從播放器上獲取插件實例

實踐

我們已經在多個業務中使用 larkplayer,并開發了十幾個插件用于解決各種業務需求,支持了千萬級/天的視頻播放。
larkplayer 及其插件均支持以 scriptnpm 以及各種模塊化的方式引用,你可以怎么舒服怎么來。

基本使用

larkplayer 使用方式十分簡單,將以下代碼粘貼到任意編輯器中,用瀏覽器打開即可運行,更詳細的使用文檔可以參考這里。




    larkplayer quick start


    

larkplayer 本身已經包含一些基礎而核心的功能和機制,比如

功能上,支持 pause()play()requestFullscreen()exitFullscreen()currentTime(second)(跳轉到某一時刻) 等

事件上,可以監聽 playpauseenderrortimeupdateloadstartfullscreen

更多的功能和事件可以查看 API。

使用插件

另外有一些常用但可能不是必須的功能,比如自定義樣式、m3u8 文件播放、斷點續播等,我們已經提供了一些插件:

larkplayer-ui 提供了一套適應 PC 與 WAP 的皮膚

larkplayer-hls 提供播放 m3u8 文件的功能

larkplayer-vr 提供全景視頻播放功能

larkplayer-auto-resume 提供自動續播功能

larkplayer-play-muted 提供靜音播放時的 UI

插件的使用也十分簡單,只需在 larkplayer 之后引入插件即可。
下面的代碼為播放器添加了自定義的樣式以及斷點續播功能,將其粘貼到任意編輯器,用瀏覽器打開即可運行。




    larkplayer plugin exmaple


    

larkplayer-ui 插件 能夠自適應 PC 與 WAP 展現以下兩種樣式:

WAP 端樣式

PC 端樣式

值得一提的是,larkplayer-ui 是一種典型的 UI 類插件,這類插件支持 JSX 語法,書寫起來非常方便。比如 WAP 端的樣式,在代碼中最終就像這樣:

controls-mobile.js

import classnames from "classnames";
import {Component, util} from "larkplayer";
import ControlBar from "./control-bar";
import ProgressBarSimple from "./progress-bar-simple";
import Loading from "../component/loading";
import PlayButton from "../component/play-button";
import NotSupport from "../component/not-support";
import Error from "../component/error";

export default class ControlsMobile extends Component {
    createEl() {
        return (
            
); } }

如果你有興趣,也可以自己查看源碼。

管理插件

larkplayer 的這種設計,使得他可能存在大量的插件,每次調用播放器后面都跟著大量的插件引用會導致重復的代碼。這里給出一種解決方案:

1.新建 common/player.js 文件,將 larkplayer 和公用的插件封裝在里面,業務上調用 common/player.js 即可

/**
 * @file 視頻播放器,包含 larkplayer 及所有公用插件
 */

import larkplayer from "larkplayer";
import "larkplayer-ui";
import "larkplayer-hls";
import "larkplaer-auto-resume";
...

export default larkplayer; 

2.對于只在特定場景使用的插件,由于引用次數較少,在對應的場景引用即可

/**
 * @file VR 視頻播放
 */

import player from "common/player.js";
import "larkplayer-vr";

const myPlayer = player("video-el");
...
編寫插件

以下是 3 類插件的編寫示例:

UI 插件編寫

MSE 插件編寫

普通插件編寫

其他 測試

采用 karma + jasmine 完成單測編碼編寫&運行
BrowserStack 提供真機環境用于測試回歸

文檔

一些示例、思想說明的文檔手動編寫

API 一類的文檔由 nodejs 插件 jsdoc 從代碼注釋生成

構建

采用 grunt 構建,完成模塊化、打包、壓縮、代碼轉換等工作。

總覽

以下是目前整個項目的結構組成

最后,如果你已經看到了這里,不妨到 github 上點個 star 吧,謝謝 :)

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

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

相關文章

  • larkplayer: 插件化的 HTML5 放器

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

    linkin 評論0 收藏0
  • 前端復習筆記--1.html標簽復習速查

    摘要:可讀性,提高代碼的可讀性,便于多人的修改維護,提高開發效率。主流瀏覽器都兼容的新標簽,對于及以下版本不認識的新元素,可以使用創建一個沒用的元素來解決,例如,也可以使用來解決兼容性問題,詳情可參考 概覽 showImg(https://segmentfault.com/img/bV5JXT?w=1880&h=1050); 文檔章節 導航 表示和主要內容不相關的區域 表示一個獨...

    番茄西紅柿 評論0 收藏0
  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要:轉載來源包管理器管理著庫,并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想,使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。 轉載來源:https://github.com/jobbole/aw... 包管理器管理著 javascript 庫,并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    netmou 評論0 收藏0

發表評論

0條評論

lijy91

|高級講師

TA的文章

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