larkplayer：HTML5プレーヤーのプラグイン

その他 2019-11-11 22:10:42 訪問数: null

larkplayerは HTML5プレーヤーを拡大する軽量＆簡単ですが、それは中小企業の映像シーンのいくつかを解決することです。これらのサービスは、必ずしも大規模かつ包括的なソリューションを必要としない、と彼らはしばしば、自分のカスタマイズ要件を持っています。

背景

なぜ書き込みlarkplayer？（私の個人的な見解のいくつかがあることに注意してください）

現在、HTML5のWebプレーヤーのコミュニティは、より成熟してきた、videojsとjwplayerは、すべての優れたソリューションです。しかし、コミュニティの偏光がより深刻です。

  • 機能豊富な＆カスタマイズ、ボリューム数百K.：プレイヤーは基本的に「大規模かつ包括的な」状態の一種であるトップランキング 特にモバイル側でいくつかの比較的単純なビジネス、または少し重すぎる、の場合は、拡大を行うと、邪魔にならないよう、いくつかの既存の機能が原因である可能性があり
  • いくつかの小さな選手たち、多くの場合のみ、独自の特定のビジネス・シナリオ、拡張性の欠如の問題を解決
  • いくつかの大きなライブラリーの存在は、（一部の選手のようにjQuery、AngularJS依存している、など）、汎用性と移植性は非常に良いではありません

このように、いくつかの中小ビジネスの映像シーンのために、実際には、ない快適なプレーヤーのオプションが利用可能です。

考えます

控訴上の問題を解決する方法は？

ビジネス上：

  • 軽量、可能な「余分」機能コード小規模な限り提供されていません。
  • 簡単に展開し、簡単のようなカスタマイズ要件、広告、皮膚、統計などの様々なサポートすることができます

コード：

  • 互換性の問題を解決するため、些細な詳細が内部に残る、統一された外部インタフェース
  • 機構プラグイン、機能を分離する、インターフェースと拡張する便利な方法を提供
  • JavaScriptは、ライブラリへの依存を減らす、ネイティブ調製し、様々な環境の移植で使いやすいです

デザイン

larkplayerのからインスピレーションvideojsは、プラグイン設計の使用：プレイヤー自身が必要な機構とAPI、プラグによって提供される残りの機能のいくつかを含む、ちょうど小型コアです。
あなたは、そのためのオンデマンドアクセス、プログレッシブ・エンハンスメント自由に選択できますし、独自のプラグインを記述します。ではugilfy+ gzipの後、larkplayerの程度コードサイズ12KB。

画像のキャプション

1.概要内部モジュールと

画像のキャプション

  • Html5 モジュールは、統一されたAPIを提供するために外部の、スムーズな互換性の問題に責任があります
  • Event イベントモジュールは、ネイティブのイベントとカスタムイベントをサポートするためのメカニズムを提供します
  • Plugin メカニズムにプラグインを提供するための手段は、プラグインのすべてのタイプの基本クラスを提供し、実行モードでは、そのインタフェースを規定しました
  • Util これは、一般的に、このようないくつかのDOM関数の簡単な操作として使用される方法を、いくつかのツールが含まれています
  • Player ブロック重合以上のモジュール、プレイヤの例えば、外部インタフェースを提供

2. API

3.イベントメカニズム

内部状態の転送およびその後の拡張のために内部コアプレーヤー通信機構などのイベントは、下にある支持体を提供します。
現在、カスタムイベントシステムの実装は、主に2種類があります：

  • イベントDOM：HTMLネイティブAPI、キャプチャとDOM関連のイベント、カスタムイベントのサポートを、聞くことができる、メカニズムをバブリング、それはいくつかの互換性の処理が必要となります
  • 持つEventEmitter：JSイベントメカニズムは、より柔軟なAPIを持って、コアは、カスタムイベントを可能にする「出版モードへのサブスクリプション」のセットで、実装されていない、DOM関連のイベントを聞いていない、ほとんどの互換性の問題

DUEはするDOM Eventバブリングメカニズムは確かに助けがそうカスタムイベントシステムの実装のための基礎としてそれを使用、その後のUIプラグインを制御するためにする一方、DOM関連のイベントをリッスンすることができます。

することによりDOM Event、以下のカテゴリーの主な機能の実現：

  • イベント・リスナー
  • イベントのキャンセル
  • カスタムイベントタイプのサポート
  • サポートマニュアルトリガ・イベントは（JSは、ユーザとの対話ではなく、トリガによってトリガ）

DOM Event 図は流れてもよいで概要：
画像のキャプション

4.プラグイン機構

プラグインは、プレイヤーは、外部または基礎コンポーネントに依存する必要はありませんが、すべての外部プラグインは、プレーヤー自体に依存しているような方法で一般的に使用される「依存関係の逆転」です。
各プラグは、プレーヤーインターフェース配向されているので、同時に、Bの存在を知らないプラグAプラグは、非常にそれぞれのインサート（機能）との間の結合を低減することができます。

タイプでプラグインを設計すると、インターフェイスは型では、プラグインの次の三つのカテゴリーをまとめ、要約ビジネス経験だけでなく、他のソリューションへの参照後、長期的なフォローアップの開発に関連する方法：

  • UIプラグインは、関連するDOM、しばしばなど皮膚、弾幕、として、いくつかのスタイルやインタラクションを追加します
  • MSEプラグインで、プレイ関連の技術に基づいて、Media Source Extensionスケーラブルなビデオプレーヤーは、などM3U8、FLV、などの他の種類をサポートしています
  • 他のプラグインが、それは二種類以上の満たすことができない、予約タイプとして見ることができる、このタイプの秋、特定の新たな高周波プラグのその後の出現は再新しいタイプから引き出すことができます

プラグインのこれらのタイプは、それを実行するには？ここでは簡単な紹介は、特定見ることができ、設計ドキュメントやソースコードを。

1.UIプラグ

  • Component イベントを提供する基本クラスとしてクラスは、工具支持体を操作するDOM機能は、プレイヤーを参照することによって得ることができます
  • 支援を受けてのツールやコードを構築することにより、コンポーネントベースの方法の開発、JSX文法
  • 再生の初期化中にパラメータを渡し、プレーヤプラグインインスタンスから取得します

2.MSEプラグ

  • MSEHandlerイベントのためのサポートを提供する基底クラスとしてクラスは、プレイヤーは、プレイヤーが変更与えて、参照を取得することができますplay許可および他の方法を
  • 再生の初期化中にパラメータを渡し、プレーヤプラグインインスタンスから取得します

3.他のプラグイン

  • Plugin イベントのサポートを提供する基底クラスとしてクラス、プレイヤーは参照を取得することができます
  • 再生の初期化中にパラメータを渡し、プレーヤプラグインインスタンスから取得します

練習

我们已经在多个业务中使用 larkplayer，并开发了十几个插件用于解决各种业务需求，支持了千万级/天的视频播放。
larkplayer 及其插件均支持以 script、npm 以及各种模块化的方式引用，你可以怎么舒服怎么来。

基本使用

larkplayer 使用方式十分简单，将以下代码粘贴到任意编辑器中，用浏览器打开即可运行，更详细的使用文档可以参考这里。

<!DOCTYPE html>
<html>
<head>
    <title>larkplayer quick start</title>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript" src="https://unpkg.com/larkplayer@latest/dist/larkplayer.js"></script>
    <script type="text/javascript">
        // js 文件以 umd 的形式包装，以 script 的形式引用时，larkplayer 会直接挂载在 window 上
        var width = Math.min(document.body.clientWidth, 640);
        var player = larkplayer('container', {
            width: width,
            height: width * 9 / 16,
            controls: true,
            src: 'https://baikebcs.bdimg.com/baike-other/big-buck-bunny.mp4'
        });

        // 支持所有的 html5 标准事件以及一些自定义事件
        player.on('play', function () {
            console.log('play');
        });
        player.on('ended', function () {
            console.log('播放完成!');
        });
    </script>
</body>
</html>

larkplayer 本身已经包含一些基础而核心的功能和机制，比如

  • 功能上，支持 pause()、play()、requestFullscreen()、exitFullscreen()、currentTime(second)(跳转到某一时刻) 等
  • 事件上，可以监听 play、pause、end、error、timeupdate、loadstart、fullscreen 等

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

使用插件

另外有一些常用但可能不是必须的功能，比如自定义样式、m3u8 文件播放、断点续播等，我们已经提供了一些插件：

插件的使用也十分简单，只需在 larkplayer 之后引入插件即可。
下面的代码为播放器添加了自定义的样式以及断点续播功能，将其粘贴到任意编辑器，用浏览器打开即可运行。

<!DOCTYPE html>
<html>
<head>
    <title>larkplayer plugin exmaple</title>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript" src="https://unpkg.com/larkplayer@latest/dist/larkplayer.js"></script>
    <!-- 自定义样式插件 https://github.com/dblate/larkplayer-ui -->
    <script src="https://unpkg.com/larkplayer-ui@latest/dist/larkplayer-ui.js"></script>
    <!-- 断点续播插件 https://github.com/dblate/larkplayer-auto-resume -->
    <script type="text/javascript" src="https://unpkg.com/larkplayer-auto-resume@latest/dist/index.js"></script>
    <script type="text/javascript">
        var width = Math.min(document.body.clientWidth, 640);
        var player = larkplayer('container', {
            width: width,
            height: width * 9 / 16,
            controls: true,
            src: 'https://baikebcs.bdimg.com/baike-other/big-buck-bunny.mp4'
        });
    </script>
</body>
</html>

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 (
            <div className={classnames(
                'lark-custom-controls',
                'lark-custom-controls--mobile',
                this.options.className)}
            >
                <ControlBar />
                <PlayButton />
                <Loading />
                <Error />
                <ProgressBarSimple />
                <NotSupport />
            </div>
        );
    }
}

如果你有兴趣，也可以自己查看源码。

管理插件

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 类插件的编写示例：

其他

测试

采用 karma + jasmine 完成单测编码编写&运行
BrowserStack 提供真机环境用于测试回归

文档

  • 一些示例、思想说明的文档手动编写
  • API 一类的文档由 nodejs 插件 jsdoc 从代码注释生成

构建

使用するgrunt構文モジュラー完了、梱包、圧縮、トランスコーディングを、というように。

概要

以下は、プロジェクト全体の構造および組成であります
画像のキャプション

最後に、あなたが希望し、ここで見てきた場合にはスターポイントgithubの上でそれを、ありがとう:)

おすすめ

転載: www.cnblogs.com/qianduanwriter/p/11838720.html
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com