ホームページ  >  記事  >  ウェブフロントエンド  >  vedio は html5 の rtmp をサポートしていますか?

vedio は html5 の rtmp をサポートしていますか?

WBOY
WBOYオリジナル
2022-09-05 16:41:232430ブラウズ

HTML5 の Vedio は rtmp をサポートしていません。rtmp は「Real Time Messaging Protocol」の略で、Macromedia によって開発された一連のビデオ ライブ ブロードキャスト プロトコルです。このソリューションには、次のような特殊な RTMP ストリーミング サービスの確立が必要です。 「Adobe Media Server」として使用されており、ブラウザでのプレーヤーの実装には Flash のみを使用できるため、HTML5 の video タグでは RTMP プロトコルのビデオを再生できません。

vedio は html5 の rtmp をサポートしていますか?

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、Dell G3 コンピューター。

html5 の vedio は rtmp をサポートしていません

Real Time Messaging Protocol (略して RTMP) は、Macromedia によって開発され、現在は Adob​​e に属している一連のビデオ ライブ ブロードキャスト プロトコルです。このソリューションでは、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。