mozilla vlcプラグインの新しい外観

プロジェクトの1つを実装するとき、vlcプレーヤーのWebサイトページにプレーヤーを埋め込むという小さなタスクに直面しましたが、プレーヤーはメインメディアファイルまたはストリームを再生する前にコマーシャルをスタイル設定および再生する機能をサポートする必要があります。

以前はサイトページ（カメラからの再生）にvlcを埋め込むことが可能でしたので、すぐにvlcプロジェクトwikiページに行きました。 詳細な調査により、標準的な方法ではこれは実現可能であるが、既成のソリューションは提示されていないことが示されました。 「怠lazは進歩のエンジンである」ことを思い出して、プレーヤーを埋め込むためのオプションを探すためにグーグルに行きました。 数時間を費やした後、既存の実装は多くなく、それらのほとんどはJulien Bouquillonが開発したVLCcontrolsプラグインに由来するという結論に達しました。 1つの問題-このプラグインは2010年に最後に更新されました。



さて、既製のソリューションはないので、プラグイン用の独自のラッパーを作成します。 メモ、コーヒー、タバコ用の紙を用意し、見つかったプラグインを調べて作業計画を作成しました。

なすべきこと

• 簡単に変更できる機能を備えたプレーヤーインターフェイスを開発します。
• プレーヤーの基本機能（再生、停止、一時停止、サウンドコントロール、フルスクリーンモード）を実装します。
• AdBlockによってブロックされない広告を表示できる機能を作成します。
• mozilla vlcプラグインでサポートされる追加メソッドのサポートを実装します。
• ページでの統合を可能な限り簡素化するため。
• さまざまなブラウザーのサポート。

準備作業が完了したので、最初にVLCcontrolsプラグインをやり直すことにしました。 私が自分の選択を深く間違えたという事実は、変更後に私に来ました。 一部の機能は必要な動作をしませんでしたが、通常は一見普通の動作で動作しなくなった機能もあります。 まあ、私たちは間違いから学びます、私はすべてをゼロから書きます。

言われたよりも早く、最初のバージョンはプラグインがやり直されるよりも速く書かれました。 その後、他の機能が追加されたバージョンがまだありましたが、すでに実装されていたものは壊れていました。 最終的に、ほとんどのvlcプラグイン機能をサポートする安定したバージョンが登場し、顧客は仕事を受け入れましたが、追加機能を実装するためにさらに追加しました。

このラッパーには何が実装されていますか？

• プラグインをロードした直後の自動再生。
• デモンストレーションの時間を調整する機能を備えたコマーシャルのデモンストレーション（AdBlockはブロックしません）
• cssファイルを変更することにより、プレーヤーの外観を変更する機能。
• すべての基本的なプレーヤー機能のサポート
• アスペクト比、インターレース、オーディオチャンネルを変更する
• 2種類のフルスクリーンモード（標準およびHTML5フルスクリーンAPI経由）
• プレーヤーにさまざまなCSS効果を適用できるモードを有効にする
• Cookieまたは指定されたパラメーターからビデオを再生する

それはすべて非常に簡単に機能します。



スクリプトをサイトに接続し、プレーヤーを呼び出してパラメーターを渡します。

hPlayer.init();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ラッパーが認識するパラメーターのメインリストを示します。

 wrapper —  id DOM ,     . * ID  —      DOM . * NULL(  ) —       (id=»hPlayer»). mode —         . * http —  vlc . * NULL(  ) —     . stream —   ,     . * ' ' —            . * NULL(  ) —     . windowless * true —     .       CSS.   .          Fullscreen API. * NULL(  ) —     (  «false»). ad_state * true —        . * NULL(  ) —     (  «false»). ad_link * 'http://site.com/adsvideo.avi' —         ad_state. * NULL(  ) —     (  «»). ad_time * '  ' —     . * NULL(  ) —     (  «10000 /10 »).
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例

パラメータを渡す通常のスタート。

 hPlayer.init({ wrapper: 'hPlayer', autoplay: true, loop: true, windowless: true, stream: 'http://site.com.ua/mainvideo.avi', mode: 'http' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メインファイルを再生する前に広告を再生します。

 hPlayer.init({ wrapper: 'hPlayer', stream: 'http://site.com.ua/mainvideo.avi', autoplay: true, loop: true, mode: 'http', ad_state:true, ad_link: 'http://site.com.ua/videofile.flv', ad_time: 10000 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

githubでそれをピックアップして使用できます： github.com/zpvs/hplayer



デモ || 実行するすべてのキー



開発中に、次の材料が使用されました。

プラグインJulien Bouquillon VLCcontrols

Wiki VideoLANを使用したドキュメント



UPD



投稿後、vlcフォーラムで、ジャンバプティストケンプからこの興味深いメッセージを受け取りました

OMGに感謝します。



公式のウェブプラグインとして使用できますか？