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 をよろしくお願いいたします。

以下もご興味があるかもしれません: