Vueのライブ放送機能の詳しい説明

Vueのライブ放送機能の詳しい説明

最近、会社でたまたま生放送をしていたのですが、今日は私が遭遇した落とし穴を記録します。会社のサーバーはAmazon AWSを使用しているので、公式APIを見るだけで大​​丈夫です。AWSの公式アドレスはAWSライブブロードキャストAPIです。
まず、実装後の具体的な効果図を見てみましょう

ここに画像の説明を挿入

インターネット上の成熟した方法によると、video.jsが使用され、AWSがカプセル化のレイヤーを作成するので、それを直接使用します。ここではvue-video-playerのvueバージョンを使用します。

まず関連パッケージをインストールします

npm インストール vue-video-player --save

vue-video-playerをmain.jsにインポートする

// 1 つ目は videoJs のスタイル、2 つ目は vue-video-player のスタイルです。他のビジネス コンポーネントでもビデオ再生が使用される可能性があることを考慮して、これらは main.js に配置されます。require('video.js/dist/video-js.css')
'vue-video-player/src/custom-theme.css' が必要です
/*ビデオ再生コンポーネントをインポート*/
'vue-video-player' から VideoPlayer をインポートします。
Vue.use(ビデオプレーヤー)

コンポーネントをインポートし、構成パラメータを変更する

          <ビデオプレーヤー
            クラス="ビデオプレーヤーvjsカスタムスキン"
            ref="ビデオプレーヤー"
            :options="プレイヤーオプション"
            @play="onPlayerPlay($event)"
            @pause="onPlayerPause($event)"
            @statechanged="プレイヤーの状態が変更されました($event)"
          </ビデオプレーヤー>

パラメータを変更し、srcを追加する

     プレイヤーオプション: {
       playbackRates: [0.7, 1.0, 1.5, 2.0], //再生速度 autoplay: false, //trueの場合、ブラウザは準備ができたときに再生を開始します。
       controls: true, //コントロール バー preload: "auto", //ビデオのプリロード muted: true, //デフォルトではすべてのオーディオが削除されます。
       loop: false, // ビデオが終了するとすぐに再開します。
       言語: "zh-CN",
       aspectRatio: "16:9", // プレーヤーを流動モードにして、プレーヤーの動的サイズを計算するときにこの値を使用します。値は比率を表す必要があります。つまり、コロンで区切られた 2 つの数値です (例: 「16:9」または「4:3」)。
       fluid: true, // true の場合、Video.js プレーヤーは流動的なサイズになります。つまり、コンテナーに合わせて比例して拡大縮小されます。
       出典:
         {
           資格情報: false、
           タイプ: "application/x-mpegURL",
           //ソース: this.liveSrc
           ソース:
             「https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8」
         }
       ]、
       poster: this.image, //カバーアドレス//width: 200 || document.documentElement.clientWidth,
       notSupportedMessage: "このビデオは現在再生できません。後でもう一度お試しください"、//Video.js がメディア ソースを再生できない場合に表示されるデフォルトのメッセージを上書きできます。
       コントロールバー: {
         timeDivider: true, // 現在の時間と継続時間の区切りdurationDisplay: true, // 継続時間を表示remainingTimeDisplay: false, // 残り時間を表示するかどうかfunction fullscreenToggle: true // 全画面ボタンを表示するかどうか}
     },

最初にライブ放送ソースが正常に再生できるかどうかをテストする必要があります。そうでない場合は、これらのエラーが報告されます。

ここに画像の説明を挿入

それでは、公式に従ってローカルライブソーステストを構築してみましょう

まずHTMLインターフェースを構築します。関連するJSライブラリとファイルの導入に注意してください。ここではhbuilderを使用しています。これは、より使いやすいためであり、プレビューモードはポートを開くのに似ています。getメソッドを介して、ローカルサービスが返されます。直接ダブルクリックしてHTMLファイルをローカルで開き、静的ファイルにアクセスするのではなく~~~~

<!doctypehtml>
<html lang="ja">
<ヘッド>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.css" rel="スタイルシート">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video.min.js"></script>
    <script src="https://player.live-video.net/1.4.0/amazon-ivs-videojs-tech.min.js"></script>
</head>
<本文>
    <div class="ビデオコンテナ">
        <video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" 自動再生をコントロールします。playsinline></video>
    </div>
    <スタイル>
        体 {
            マージン: 0;
        }
        .ビデオコンテナ{
            幅: 640ピクセル;
            高さ: 480ピクセル;
            マージン: 15px;
        }
    </スタイル>
    <スクリプト>
        (関数プレイ() {
            // Amazon IVS APIから再生URLを取得する
            //var PLAYBACK_URL = 'https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8';
            var PLAYBACK_URL = 'https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8'
            // Amazon IVS を Video.js の再生テクノロジーとして登録する
            IVSTech を登録します(ビデオjs);
            // プレーヤーを初期化する
            var プレーヤー = videojs('amazon-ivs-videojs', {
               技術注文: ["AmazonIVS"]
            }, () => {
               console.log('プレーヤーは使用可能です!');
               // ストリームを再生
               プレイヤーのURLを再生します。
            });
        })();
    </スクリプト>
</本文>
</html>

港からのアクセス、

ここに画像の説明を挿入

その後、オンラインライブソースの再生はローカルの静的ファイルでも実現できることがわかった。

ここに画像の説明を挿入

追伸：独自のローカルサービステストを構築したくない場合は、awdが提供するオンラインテストを直接使用することもできます。
https://replit.com/@changdong0524/amazon-ivs-player-web-sample#samples/common/form-control.tsですが、自分でアカウントを登録する必要があります。おそらくこんな感じです

ここに画像の説明を挿入

自分で調べることもできます。input.value を実際のソース アドレスに変更し、右側のシェル コンソールで起動します。

npm インストール && npm 実行開始

効果は次の通りで、全く同じである

ここに画像の説明を挿入

ロードのアドレスを自分のライブ ソース m3u8 形式に変更するだけです。これは私がすでにセットアップしたオンライン ライブ ソースです。

ここに画像の説明を挿入

ライブソースがOKになったら、プロジェクトコードを書き続けます。

  <テンプレート>
    <div class='デモ'>
      <ビデオプレーヤークラス="ビデオプレーヤーvjs-custom-skin" 
        ref="ビデオプレーヤー" 
        :playsinline="true" 
        :options="プレイヤーオプション"
        @play="onPlayerPlay($event)" 
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @waiting="onPlayerWaiting($event)"
        @playing="onPlayerPlaying($event)"
        @loadeddata="onPlayerLoadeddata($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @canplay="onPlayerCanplay($event)"
        @canplaythrough="onPlayerCanplaythrough($event)"
        @statechanged="プレイヤーの状態が変更されました($event)"
        @ready="プレイヤーの準備完了"
      >
      </ビデオプレーヤー>
    </div>
  </テンプレート>

  <スクリプト>
    エクスポートデフォルト{
      メソッド: {
        // 再生コールバック onPlayerPlay(player) {
          console.log('プレイヤープレイ!', プレイヤー)
        },

        // 一時停止コールバック onPlayerPause(player) {
          console.log('プレイヤー一時停止!', プレイヤー)
        },

        // ビデオの再生が終了したときのコールバック onPlayerEnded($event) {
          console.log(プレイヤー)
        },

        // DOM要素のreadyStateが変更されると再生が停止します onPlayerWaiting($event) {
          console.log(プレイヤー)
        },

        // 再生が開始されました callback onPlayerPlaying($event) {
          console.log(プレイヤー)
        },

        // プレーヤーが現在の再生位置でデータをダウンロードすると、onPlayerLoadeddata($event) がトリガーされます {
          console.log(プレイヤー)
        },

        // 現在の再生位置が変更されたときにトリガーされます。
        プレイヤータイム更新($event) {
          console.log(プレイヤー)
        },

        //メディアの readyState が HAVE_FUTURE_DATA 以上である onPlayerCanplay(player) {
          // console.log('player はプレイできます!', player)
        },

        // メディアの readyState は HAVE_ENOUGH_DATA 以上です。つまり、メディア ファイル全体をバッファリングなしで再生できます。
        onPlayerCanplaythrough(プレイヤー) {
          // console.log('player はプレイできます!', player)
        },

        //再生状態変更コールバック playerStateChanged(playerCurrentState) {
          console.log('プレイヤーの現在の更新状態', playerCurrentState)
        },

        // リスナーをコンポーネントの準備完了状態にバインドします。イベント リスナーとの違いは、準備完了イベントがすでに発生している場合は、関数がすぐにトリガーされることです。 。
        プレイヤーの準備ができました(プレイヤー) {
          console.log('example player 1 が準備完了', player);
        }

      },
    }
 </スクリプト>

必要に応じて追加できる関連する監視機能を定義します。以下はよく使用される機能です。

    onPlayerPlay(プレイヤー) {
      console.log("onPlayerPlay", プレイヤー);
    },
    onPlayerPause(プレイヤー) {
      console.log("onPlayerPause", プレイヤー);
    },
    プレイヤーの状態が変更されました(プレイヤー) {
      console.log("playerStateChanged", プレイヤー);
    },

次にサービスを開始します

npm 実行開始

エラーが見つかり、関連するビデオが見つかりませんでした。そのため、関連するライブラリが不足していることがわかりました。プロジェクト全体の index.html に次のライブラリ サポート ファイルを追加する前に、AWS ライブラリを追加する必要がありました。

  <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.css" rel="スタイルシート">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video.min.js"></script>
  <script src="https://player.live-video.net/1.4.0/amazon-ivs-videojs-tech.min.js"></script>

ここに画像の説明を挿入

ついに完全な効果が出ました

ここに画像の説明を挿入

注記：
インポートしたスタイルを有効にするには、ビデオ プレーヤー タグのクラスを「video-player vjs-custom-skin」に設定する必要があります。 hlsのサポートが追加されました。ストリーミング メディア m3u8g およびその他の形式をサポートします。

hls.js サポートを追加するには、次のように依存関係をインストールする必要があります。

npm をインストール --save videojs-contrib-hls

ここはAWSの公式倉庫です。自分で取りに行く必要があります
https://github.com/aws-samples

追加: ページに直接実装すると、直接再生されない可能性があり、ビデオを再生できないというエラーが報告されます。 理由は2つあると思います。スクリーンショットを参照してください。

ここに画像の説明を挿入

1: バックグラウンドから返されたストリーミング アドレスを非同期で取得するには、一定の時間がかかります。この間、ライブ コンポーネントは初期化されていますが、ライブ ソース アドレスが取得されていないため、ライブ アドレスが見つからないというエラーが報告されます。
2：ライブブロードキャストコンポーネントにも完全なライフサイクルがあります。さまざまなライフサイクルを検出し、リクエストが完了した後、適切なタイミングでライブブロードキャストソースアドレスを配置できます。ライブブロードキャストコンポーネントは常にこのライブブロードキャストアドレスを要求して、オンラインライブブロードキャストを実現します。怠け者なので、今のところ勉強する時間はあまりありません。時間があるときにじっくり勉強します。サブコンポーネントの単一のグループに抽出し、アドレスをpropsに渡しました。

ここに画像の説明を挿入
ここに画像の説明を挿入

効果は同じで、他のコンポーネントから呼び出すのにも便利です。

ここに画像の説明を挿入

最後に、管理の便宜上、最終的なコードをすべて両手で提供します。
始める
1:メイン.js

// 1 つ目は videoJs のスタイル、2 つ目は vue-video-player のスタイルです。他のビジネス コンポーネントでもビデオ再生が使用される可能性があることを考慮して、これらは main.js に配置されます。require('video.js/dist/video-js.css')
'vue-video-player/src/custom-theme.css' が必要です
/*ビデオ再生コンポーネントをインポート*/
'vue-video-player' から VideoPlayer をインポートします。
Vue.use(ビデオプレーヤー)

2: ビデオプレーヤー

<テンプレート>
  <ビデオプレーヤー
    クラス="ビデオプレーヤーvjsカスタムスキン"
    ref="ビデオプレーヤー"
    :options="プレイヤーオプション"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @statechanged="プレイヤーの状態が変更されました($event)"
  </ビデオプレーヤー>
</テンプレート>

<スクリプト>
//「amazon-ivs-player」から{registerIVSTech}をインポートします。
エクスポートデフォルト{
  名前： ""、
  プロパティ: ["src", "image"],
  データ（） {
    戻る {
      // ライブソース:
      // "https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8",
      プレイヤーオプション: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //再生速度 autoplay: false, //trueの場合、ブラウザは準備ができたときに再生を開始します。
        controls: true, //コントロール バー preload: "auto", //ビデオのプリロード muted: false, //デフォルトではオーディオは削除されます。
        loop: false, // ビデオが終了するとすぐに再開します。
        言語: "zh-CN",
        aspectRatio: "16:9", // プレーヤーを流動モードにして、プレーヤーの動的サイズを計算するときにこの値を使用します。値は比率を表す必要があります。つまり、コロンで区切られた 2 つの数値です (例: 「16:9」または「4:3」)。
        fluid: true, // true の場合、Video.js プレーヤーは流動的なサイズになります。つまり、コンテナーに合わせて比例して拡大縮小されます。
        出典:
          {
            資格情報: false、
            タイプ: "application/x-mpegURL",
            ソース: this.src
            // "https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8"
          }
        ]、
        poster: this.image, //カバーアドレス//width: 200 || document.documentElement.clientWidth,
        notSupportedMessage: "このビデオは現在再生できません。後でもう一度お試しください"、//Video.js がメディア ソースを再生できない場合に表示されるデフォルトのメッセージを上書きできます。
        コントロールバー: {
          timeDivider: true, // 現在の時間と継続時間の区切りdurationDisplay: true, // 継続時間を表示remainingTimeDisplay: false, // 残り時間を表示するかどうかfunction fullscreenToggle: true // 全画面ボタンを表示するかどうか}
      }
    };
  },
  // ライブプレイ() {
  // this.playerOptions.sources[0].src = this.liveSrc;
  // var obj = {};
  // obj.withCredentials = false;
  // obj.type = "application/x-mpegURL";
  // obj.src = this.pullUrl;
  // this.playerOptions.sources.append(obj);
  // },
  計算: {
    プレイヤー() {
      this.$refs.videoPlayer.player を返します。
    }
  },
  計算: {
    プレーヤー() {
      this.$refs.videoPlayer.player を返します。
    }
  },
  メソッド: {
    onPlayerPlay(プレイヤー) {
      console.log("onPlayerPlay", プレイヤー);
    },
    onPlayerPause(プレイヤー) {
      console.log("onPlayerPause", プレイヤー);
    },
    プレイヤーの状態が変更されました(プレイヤー) {
      console.log("playerStateChanged", プレイヤー);
    }
  }
};
</スクリプト>

3:detail.vue 親コンポーネント

<テンプレート>
  <d2 コンテナ>
    <div>
      <div class="webTitle">ライブ放送管理> 大規模ライブ放送> 詳細</div>
      <el-table :data="リスト" ボーダー ストライプ>
        <el-table-column align="center" label="ライブID">
          <テンプレート スロット スコープ="スコープ">
            <span>{{ スコープ.行.id }}</span>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="ライブタイトル">
          <テンプレート スロット スコープ="スコープ">
            <span>{{ スコープ.行.タイトル }}</span>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="アカウント">
          <テンプレート スロット スコープ="スコープ">
            <span>{{ スコープ.行.名前 }}</span>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="ライブ放送開始時間">
          <テンプレート スロット スコープ="スコープ">
            <span>{{ scope.row.liveStart | タイムスタンプ形式 }}</span>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="視聴者数">
          <テンプレート スロット スコープ="スコープ">
            <span>{{ スコープ.行.ウォッチ番号 }}</span>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="コメント数">
          <テンプレート スロット スコープ="スコープ">
            <span>{{ スコープ.行.予約番号 }}</span>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="チケット購入金額（GP）">
          <テンプレート スロット スコープ="スコープ">
            <span>{{scope.row.preSaleType == 1 ? scope.row.preSaleBalance*1 + scope.row.preSaleDeposit *1+ scope.row.fullPayment*1 : scope.row.fullPayment}}</span>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="贈与金額">
          <テンプレート スロット スコープ="スコープ">
            <span>{{ スコープ.行.予約番号 }}</span>
          </テンプレート>
        </el-table-column>
      </el-table>
      <div class="playWrap">
        <div class="livePicture">
          <vueVideoPlayers :src="src" :image="画像" />
        </div>
        <div class="liveCommet"></div>
      </div>
      <div class="playWrap">
        <div class="playLeft">
          <p>基本情報</p>
          <ul class="leftInfo">
            <li class="playItem">
              <span class="playTitle">カテゴリー</span>
              <span class="playContent">{{typeName}}</span>
            </li>
            <li class="playItem">
              <span class="playTitle">先行販売タイプ</span>
              <span class="playContent">{{formData.preSaleType == 1 ? "先行販売" : "先行販売以外"}}</span>
            </li>
            <li class="playItem">
              <span class="playTitle">録画するかどうか</span>
              <span class="playContent">{{formData.isRecordedBroadcast ==1 ? "録画された放送" : "録画されていない放送"}}</span>
            </li>
            <li class="playItem">
              <span class="playTitle">俳優一覧</span>
              <span class="playContent">{{formData.actor}}</span>
            </li>
            <li class="playItem">
              <span class="playTitle">ライブ放送の紹介</span>
              <span class="playContent">{{formData.liveIntroduce}}</span>
            </li>
          </ul>
          <p>先行販売情報</p>
          <ul class="leftInfo">
            <li class="playItem">
              <span class="playTitle">先行販売期間</span>
              <span class="playContent">
                {{formData.preSaleStart}}
                <span style="color:#333;margin:0 5px">-</span>
                {{formData.preSaleEnd}}
              </span>
            </li>
            <li class="playItem">
              <span class="playTitle">結成人数</span>
              <span class="playContent">{{formData.formingNum ? formData.formingNum : 0}}</span>
            </li>
            <li class="playItem">
              <span class="playTitle">成形状態</span>
              <span
                クラス="playContent"
              >{{formData.reserveNumber > formData.reserveNumber ? "formed":"unformed" }}</span>
            </li>
          </ul>
          <p>先行販売以外の情報</p>
          <ul class="leftInfo">
            <li class="playItem">
              <span class="playTitle">チケット販売開始時間</span>
              <span class="playContent">{{formData.ticketingStart}}</span>
            </li>
          </ul>

          チケット価格
          <ul class="leftInfo">
            <li class="playItem">
              <span class="playTitle">事前販売保証金</span>
              <span class="playContent">{{formData.preSaleDeposit ? formData.preSaleDeposit : 0}}</span>
            </li>
            <li class="playItem">
              <span class="playTitle">先行販売残高</span>
              <span class="playContent">{{formData.preSaleBalance ? formData.preSaleBalance : 0}}</span>
            </li>
            <li class="playItem">
              <span class="playTitle">定価</span>
              <span class="playContent">{{formData.fullPayment ? formData.fullPayment : 0}}</span>
            </li>
            <li class="playItem">
              <span class="playTitle">リプレイ価格</span>
              <span class="playContent">{{formData.playbackPrice ? formData.playbackPrice : 0}}</span>
            </li>
          </ul>
        </div>
        <div class="playRight">
          <p>画像データ</p>
          <ul class="leftInfo">
            <li class="playItem">
              <span class="playTitle">プロモーションビデオ</span>
              <span class="playContent">
                <画像
                  v-if="formData.propagandaVideoUrl"
                  :src="ビデオPng"
                  クラス="playImage"
                  @click="ビデオを表示(formData.propagandaVideoUrl,true)"
                />
                <span v-else style="color:#cfcfcf">ビデオなし</span>
              </span>
            </li>
            <li class="playItem">
              <span class="playTitle">ビデオをもう一度見る</span>
              <span class="playContent">
                <画像
                  v-if="formData.recordedBroadcastUrl"
                  :src="ビデオPng"
                  クラス="playImage"
                  @click="showVideo(formData.recordedBroadcastUrl,false)"
                />
                <span v-else style="color:#cfcfcf">ビデオなし</span>
              </span>
            </li>
            <li class="playItem">
              <span class="playTitle">ポスターを共有</span>
              <span class="playContent">
                <el-image
                  クラス="matchImg"
                  :src="formData.shareImage"
                  :preview-src-list="[formData.shareImage]"
                />
              </span>
            </li>
            <li class="playItem">
              <span class="playTitle">カバー画像</span>
              <span class="playContent">
                <el-image
                  クラス="matchImg"
                  v-for="(item,index) in JSON.parse(formData.coverImage)"
                  :src="アイテム"
                  :key="インデックス"
                  :preview-src-list="[項目]"
                />
              </span>
            </li>
          </ul>
          <!-- <p>画像データ</p>
          <ul class="leftInfo"></ul>-->
        </div>
      </div>
    </div>
    <el-button @click="backPage">戻る</el-button>
    <el-dialog title="表示" :visible.sync="ビデオを表示" width="850px">
      <div v-if="ビデオ">
        <video :src="tempSrc" controls="controls" width="800" height="600">お使いのブラウザはビデオタグをサポートしていません。 </ビデオ>
      </div>
      <div v-else>
        <vueVideoPlayers :src="tempSrc" :image="画像" />
      </div>
    </el-ダイアログ>
  </d2-コンテナ>
</テンプレート>

<スクリプト>
"@/api/3d/liveApi" から { getLiveDetail、getLiveSellDetail } をインポートします。
「@/assets/img/video.jpg」からvideoPngをインポートします。
"@/common/filters" から { timestampFormat } をインポートします。
//「amazon-ivs-player」から{registerIVSTech}をインポートします。
「./videoPlayer」からvueVideoPlayersをインポートします。

エクスポートデフォルト{
  名前： ""、
  データ（） {
    戻る {
      src: "", //ライブソースビデオ画像: "",
      ビデオPng: ビデオPng、
      ビデオ: 本当、
      ビデオ表示: false、
      // videoSrc: "", //プロモーションビデオ//recordedBroadcastUrl:'', //再生ビデオ tempSrc: "",
      リスト: [],
      id: "",
      タイプ名: "",
      プルURL: "",
      フォームデータ: {
        id: "",
        プルURL: "",
        プッシュURL: "",
        タイトル： ""、
        ライブ紹介: "",
        俳優: "",
        タイプID: "",
        録画放送: 2,
        カバー画像: "",
        プロパガンダビデオURL: "",
        形成数: "",
        preSaleDeposit: "", // 先行販売デポジット価格 preSaleBalance: "", // 先行販売残高価格 fullPayment: "", // 全額支払い価格 playbackPrice: "", // 再生価格 preSale: [], // 先行販売時間 preSaleStart: "",
        プレセール終了: "",
        liveStart: "", //ライブ放送開始時刻 isSpeak: 1,
        優先度： ""、
        シェア画像: ""
      }
    };
  },
  作成された() {
    ライブ販売の取得
    データの取得
  },
  マウント() {},
  コンポーネント:
    vueビデオプレーヤー
  },
  メソッド: {
    戻るページ() {
      this.$router.push("/liveMange/largeBrand");
    },
    //チケット販売状況 getLiveSell() {
      var id = this.$route.params.id;
      getLiveSellDetail(id).then(res => {
        定数結果 = res.data;
      });
    },
    //ビデオを見るためのポップアップウィンドウを開く showVideo(playSrc, mark) {
      this.videoVisible = true;
      this.video = マーク;
      this.tempSrc = 再生Src;
    },
    取得データ() {
      var id = this.$route.params.id;
      id は、
      //var localMatchTypeId=localStorage.getItem('matchTypeId')
      //var localPriority = localStorage.getItem('priority')
      // var data = { id, page: 1, limit: 10 };
      getLiveDetail(id).then(res => {
        定数結果 = res.data;
        // カテゴリ ID がない場合はローカルを取得します // if (!result.matchTypeId) {
        // result.matchTypeId = localMatchTypeId
        // }
        // if(!result.priority){
        // result.priority = localPriority
        // }

        this.formData = 結果;
        let { pullUrl, pushUrl, coverImage } = 結果;
        プルUrl
        カバーイメージをJSONで解析する
        定数{
          id、
          タイトル、
          ライブ開始、
          チケット販売開始、
          再生価格、
          前売預託金、
          プレセール残高、
          全額支払い
        } = 結果;

        定数objData = {
          id、
          タイトル、
          名前: "管理者",
          ライブ開始、
          ウォッチナンバー: localStorage.getItem("ウォッチナンバー") | 0,
          予約番号: localStorage.getItem("reserveNumber") | 0,
          前売預託金、
          プレセール残高、
          全額支払い、
          チケット販売開始、
          再生価格
        };

        this.list.push(objData);
        // this.formData.registrationStart=result.registrationStart + ''
        // this.formData.registrationEnd = result.registrationEnd + ''
        // this.formData.voteStart = result.voteStart + ''
        // this.formData.voteEnd = result.voteEnd + ''

        //投票期間// var preSaleStart = moment(parseInt(result.preSaleStart)).format(
        // "YYYY-MM-DD hh:mm:ss:SSS"
        // );
        // var preSaleEnd = moment(parseInt(result.preSaleEnd)).format(
        // "YYYY-MM-DD hh:mm:ss:SSS"
        // );
        // イベントの終了 // this.formData.liveStart = new Date(result.liveStart);
        //this.formData.registration.push(開始)
        //this.formData.registration.push(終了)
        // 手動割り当て // this.$set(this.formData, "preSale", [preSaleStart, preSaleEnd]);
        //this.$set(this.formData, "vote", [voteStart, voteEnd]);

        //日付のフォーマット //先行販売期間 this.formData.preSaleStart = result.preSaleStart
          ? タイムスタンプ形式(result.preSaleStart)
          : "";
        this.formData.preSaleEnd = result.preSaleEnd
          ? タイムスタンプ形式(result.preSaleEnd)
          : "";

        // 非先行販売チケットの販売開始時間 this.formData.ticketingStart = result.ticketingStart
          ? タイムスタンプフォーマット(result.ticketingStart)
          : "";

        this.typeName = localStorage.getItem("typeName") || "";
      });
    }
  }
};
</スクリプト>

<スタイルスコープ>
.playWrap {
  ディスプレイ: フレックス;
  背景: #fff;
  上マージン: 20px;
}

.leftInfo{
  リストスタイル: なし;
  境界線: 1px 実線 #cfcfcf;
}
.playLeft{
  幅: 48%;
  /* 境界線: 1px 実線 #f5f5f5; */
}
.playRight{
  幅: 48%;
  左マージン: 2%;
}
.playItem{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  パディング: 10px 0;
  下部境界線: 1px 実線 #cfcfcf;
}
.playItem:最後の子{
  下部境界線: なし;
}
.playContent{
  左マージン: 20px;
  色: #999;
}

.matchImg{
  幅: 80ピクセル;
  高さ: 80px;
  右マージン: 10px;
}
.playImage{
  幅: 80ピクセル;
  高さ: 80px;
}

.playWrap {
  ディスプレイ: フレックス;
}
.livePicture{
  幅: 40%;
  高さ: 400px;
}
</スタイル>

3: 次のコードをindex.htmlに追加してください。

 <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.css" rel="スタイルシート">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video.min.js"></script>
  <script src="https://player.live-video.net/1.4.0/amazon-ivs-videojs-tech.min.js"></script>

終わり
さあ〜〜〜〜

Vue のライブブロードキャスト機能に関する記事はこれで終わりです。Vue のライブブロードキャストに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue-video-player を使用してライブ放送を実現する方法
  • vue-video-player はリアルタイムのビデオ再生を実装します (監視機器 - rtmp ストリーム)
  • Vue+webrtc (Tencent Cloud) ライブブロードキャスト機能の実装実践
  • 2 分で Vue リアルタイム ライブ ブロードキャスト システムを実装するためのサンプル コード
  • Vueはビデオストリームを読み込み、ライブブロードキャスト機能を実装します

<<:  MySQL では UTF-8 が推奨されないのはなぜですか?

>>:  ウェブページ入力ボックスのスタイルトリガー効果

推薦する

TypeScriptの基本型の詳細な説明

目次ブール型数値型文字列型文字列と数値を連結する未定義およびnull配列型タプル型列挙型あらゆるタイ...

初心者向けのMySQLデータベースとテーブルDDLの作成と操作の学習

目次1. データベースを操作する1.1 データベースを作成する1.2 データベースをクエリする1.3...

Windows 8 での MySQL Community Server 5.6 のインストールと設定のチュートリアル

この記事では、Windows 8 での MySQL5.6 のインストールと設定のチュートリアルを記録...

TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...

Vueのライフサイクルについて詳しく説明します

目次序文1. Vue2 のライフサイクルインスタンスのライフサイクルその他のライフサイクルフック2....

MySQL でのサブクエリの基本的な使用法

目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...

スタイルをより標準化するための CSS の書き方に関する 5 つのヒント

1. CSSをアルファベット順に並べるアルファベット順ではありません:コードをコピーコードは次のとお...

子要素の margin-top によって親要素が移動する問題の解決方法

問題の説明今日、ページ スタイルを変更していたときに、子要素にmargin-top設定したのに、子要...

JavaScript 配列のマージのケーススタディ

方法1: var a = [1,2,3]; var b = [4,5] b を連結します。 コンソー...

Windows2008 64 ビット システムでの MySQL 5.7 グリーン バージョンのインストール チュートリアル

序文この記事では、MySQL 5.7 グリーン バージョンのインストール チュートリアルを紹介します...

JavaScript 文字列オブジェクトメソッド

目次文字列オブジェクトのメソッド方法 1: indexOf() (推奨)方法 2: search()...

ネイティブ JS オブジェクト指向タイピング ゲーム

この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...

ビジネス HTML メール作成に関する提案

許可ベースの電子メール マーケティングにより、マーケティングとプロモーションのコストを大幅に削減でき...

Reactはページの透かし効果の全プロセスを実現します

目次序文1. 使用例2. 実施プロセス3. コンポーネントコード要約する序文1. cavans では...

MySQLにおけるテーブルインデックスの定義方法と導入

概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...