ホームページ > 記事 > ウェブフロントエンド > vedio は html5 の rtmp をサポートしていますか?
HTML5 の Vedio は rtmp をサポートしていません。rtmp は「Real Time Messaging Protocol」の略で、Macromedia によって開発された一連のビデオ ライブ ブロードキャスト プロトコルです。このソリューションには、次のような特殊な RTMP ストリーミング サービスの確立が必要です。 「Adobe Media Server」として使用されており、ブラウザでのプレーヤーの実装には Flash のみを使用できるため、HTML5 の video タグでは RTMP プロトコルのビデオを再生できません。
このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、Dell G3 コンピューター。
Real Time Messaging Protocol (略して RTMP) は、Macromedia によって開発され、現在は Adobe に属している一連のビデオ ライブ ブロードキャスト プロトコルです。このソリューションでは、Adobe Media Server などの特殊な RTMP ストリーミング サービスを構築する必要があり、ブラウザでのプレーヤーの実装に使用できるのは Flash のみです。リアルタイム性が高く遅延も非常に少ないのですが、モバイルWEB再生に対応していないのが欠点です。
ブラウザ側では、HTML5 video タグは RTMP プロトコルのビデオを再生できません。これは video.js を通じて実現できます。
vue プロジェクトは vue-video-player を使用します。最下層は実際には vue の単なるプラグインである videojs を使用します。まず、vue プロジェクトにプラグインをインストールする必要がありますnpm install vue-video- player
これで、HelloWorld コンポーネントで直接プレーヤーを使用できるようになります
class="vjs-custom-skin videoPlayer" :options="playerOptions" > import "@/video-js.css"; import { videoPlayer } from "vue-video-player"; import "videojs-flash"; export default { components: { videoPlayer, }, data() { return { playerOptions: { height: "300", sources: [ { type: "rtmp/mp4", src: "rtmp://192.168.12.187:1935/live/1", }, ], techOrder: ["flash"], autoplay: false, controls: true, }, }; }, };
(学習ビデオ共有: css ビデオ チュートリアル , HTML ビデオ チュートリアル)
以上がvedio は html5 の rtmp をサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。