H5.videoは、フルスクリーン再生ビデオストリームを禁止し、マイクロ手紙を生きます

今回のライブプロジェクトをやっ時には、ライブの需要だけでなく、ビデオ再生の必要があり、要件がマイクロ手紙で半画面で再生することができ、画面の残りの半分は、いくつかの操作を行うことができ、いくつかのコンポーネントは、ビデオの上に浮い必要です。
バラオンライン様々な、最終的には簡単なビデオラベルで、フルスクリーンで再生することができ、マイクロチャネルを実現し、自動的に再生されないために様々な実験、。自動再生は、まだ完璧な解決策を見つけていません。


非フルスクリーンビデオ再生

<video
          loop
          autoPlay
          src={url}
          controls={true}
          poster={pic}
          playsinline
          webkit-playsinline
          x5-video-player-type="h5-page"
        />

だから、多くのプロパティは、マイクロ文字または最後に使用して行うことを決定し再生することができます

x5-video-player-type="h5-page"

なお、インターネットの多くは、このプロパティの値があると述べたことh5が、それはありません、あるh5-page役割のみが、このアプローチは、ビデオ、ライブストリーミング(M3U8)はまだフルスクリーンに元の文書の流出するだけで再生することができます。だから、私のアプローチは、いくつかの他の属性とライブストリーミングの場合、裁判官の追加です。

<video
            src={url}
            controls={true}
            poster={pic}
            playsInline
            webkit-playsinline
            x-webkit-airplay="true"
            x5-playsinline="true"
          />

ときライブストリームを再生する不能上記の特性と組み合わせて決定的な役割を果たし、あるいはフルスクリーンになり、そして、反応の下にそれがある場合、値は二つのプロパティに書き込む必要がありますが書き込ませずに使用することはできませんデフォルト値はtrueに等しい反応機能には、そうでない場合、または動作しません。


また、自動再生に関して、またプログラム、ソースコードファイルのJSは、ウェブサイト上でダウン軽く押す表示する権限のないドキュメントを見つける前に、名前のHLS-0.6.14.min.js、外観をソースを知りませんそして、HLS-関連は、自動的に再生することができますが、唯一のビデオM3U8を再生するには、に注意を払う、ビデオではなく、ライブストリームで、他の人は入れていませんが、自動フルスクリーン再生を実現することはできません。
用途は以下のとおりです。

let Hls = (window as any).Hls;
    if (Hls && Hls.isSupported()) {
      this.hls = new Hls();
      this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
        if (this.player) {
          this.player.play();
        }
      });
    }
        //----------

        this.player = document.findElementById('video');
        if (this.hls && url && this.player) {
      this.hls.loadSource(url);
      this.hls.attachMedia(this.player);
    }

下部の噂に期待して、jsのソースやドキュメントを知っている学生が存在する場合、コードHLSは、添付ファイルをアップロードすることはできませんJsの後に文書がここに起因していることをグローバルオブジェクトへの参照である使用に関することができる唯一の簡潔説明します。

おすすめ

転載: blog.51cto.com/wuzishu/2437629