Vue實作直播功能-有解無憂

Vue中在線直播

最近公司剛好在做直播，那么今天就記錄一下遇到的坑，公司服務器用的亞馬遜aws，所以直接看官方的api就可以了，aws官方地址aws直播api
先看下具體的實作后的效果圖把
在這里插入圖片描述
按照網上成熟的方法，使用的是video.js,然后aws做了一層封裝，那么我們直接拿來使用把,這里使用vue版本的vue-video-player

先安裝下相關的包

npm install vue-video-player --save

在main.js引入vue-video-player

// 第一個是videoJs的樣式，后一個是vue-video-player的樣式，因為考慮到我其他業務組件可能也會用到視頻播放，所以就放在了main.js內
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
/*匯入視頻播放組件*/
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer)

匯入組件，修改配置引數

          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :options="playerOptions"
            @play="onPlayerPlay($event)"
            @pause="onPlayerPause($event)"
            @statechanged="playerStateChanged($event)"
          ></video-player>

修改引數,添加src

     playerOptions: {
       playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
       autoplay: false, //如果true,瀏覽器準備好時開始回放，
       controls: true, //控制條
       preload: "auto", //視頻預加載
       muted: true, //默認情況下將會消除任何音頻，
       loop: false, //導致視頻一結束就重新開始，
       language: "zh-CN",
       aspectRatio: "16:9", // 將播放器置于流暢模式，并在計算播放器的動態大小時使用該值，值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
       fluid: true, // 當true時，Video.js player將擁有流體大小，換句話說，它將按比例縮放以適應其容器，
       sources: [
         {
           withCredentials: false,
           type: "application/x-mpegURL",
           //src: this.liveSrc
           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無法播放媒體源時顯示的默認資訊，
       controlBar: {
         timeDivider: true, // 當前時間和持續時間的分隔符
         durationDisplay: true, // 顯示持續時間
         remainingTimeDisplay: false, // 是否顯示剩余時間功能
         fullscreenToggle: true // 是否顯示全屏按鈕
       }
     },

注意要先測驗直播源可以成功播放才可以，否則就會報下這些錯誤
在這里插入圖片描述
那么我們先按照官方的搭建一個本地的直播源測驗吧

先搭建html界面,注意要引入相關的js庫和檔案，我這里用hbuilder，因為用的比較順手，而且預覽模式類似于開了一個埠，通過get方式的方法，回傳了一個本地服務，而不是直接本地雙擊打開html檔案，訪問靜態檔案哦~~~~

<!doctype html>
<html lang="en">
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.css" rel="stylesheet">
    <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>
<body>
    <div class="video-container">
        <video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" controls autoplay playsinline></video>
    </div>
    <style>
        body {
            margin: 0;
        }
        .video-container {
            width: 640px;
            height: 480px;
            margin: 15px;
        }
    </style>
    <script>
        (function play() {
            // Get playback URL from Amazon IVS API
            //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'
            // Register Amazon IVS as playback technology for Video.js
            registerIVSTech(videojs);
            // Initialize player
            var player = videojs('amazon-ivs-videojs', {
               techOrder: ["AmazonIVS"]
            }, () => {
               console.log('Player is ready to use!');
               // Play stream
               player.src(PLAYBACK_URL);
            });
        })();
    </script>
</body>
</html>

通過埠訪問，
后來發現通過本地靜態檔案，也可以實作在線直播源播放

ps：如果不想自己搭建本機服務測驗，也可以直接使用awd提供的在線測驗
https://replit.com/@changdong0524/amazon-ivs-player-web-sample#samples/common/form-control.ts，但是要自己注冊賬號哦
大概就是下面這樣子哦

大家自己去摸索一下就會了，修改input.value為直播源地址，然后在右邊shell控制臺啟動就可以了

npm  install && npm  run  start

效果如下，是一模一樣的
在這里插入圖片描述
load這里的地址換成你自己的直播源m3u8格式就好了，我這里是已經搭建好的在線直播源

直播源沒問題后，接下來就直接繼續寫專案代碼

  <template>
    <div class='demo'>
      <video-player class="video-player vjs-custom-skin" 
        ref="videoPlayer" 
        :playsinline="true" 
        :options="playerOptions"
        @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="playerStateChanged($event)"
        @ready="playerReadied"
      >
      </video-player>
    </div>
  </template>

  <script>
    export default {
      methods: {
        // 播放回呼
        onPlayerPlay(player) {
          console.log('player play!', player)
        },

        // 暫停回呼
        onPlayerPause(player) {
          console.log('player pause!', player)
        },

        // 視頻播完回呼
        onPlayerEnded($event) {
          console.log(player)
        },

        // DOM元素上的readyState更改導致播放停止
        onPlayerWaiting($event) {
          console.log(player)
        },

        // 已開始播放回呼
        onPlayerPlaying($event) {
          console.log(player)
        },

        // 當播放器在當前播放位置下載資料時觸發
        onPlayerLoadeddata($event) {
          console.log(player)
        },

        // 當前播放位置發生變化時觸發，
        onPlayerTimeupdate($event) {
          console.log(player)
        },

        //媒體的readyState為HAVE_FUTURE_DATA或更高
        onPlayerCanplay(player) {
          // console.log('player Canplay!', player)
        },

        //媒體的readyState為HAVE_ENOUGH_DATA或更高，這意味著可以在不緩沖的情況下播放整個媒體檔案，
        onPlayerCanplaythrough(player) {
          // console.log('player Canplaythrough!', player)
        },

        //播放狀態改變回呼
        playerStateChanged(playerCurrentState) {
          console.log('player current update state', playerCurrentState)
        },

        //將偵聽器系結到組件的就緒狀態，與事件監聽器的不同之處在于，如果ready事件已經發生，它將立即觸發該函式，，
        playerReadied(player) {
          console.log('example player 1 readied', player);
        }

      },
    }
 </script>

定義相關的監聽函式，可以根據自己需要加上，常用的有下面幾個

    onPlayerPlay(player) {
      console.log("onPlayerPlay", player);
    },
    onPlayerPause(player) {
      console.log("onPlayerPause", player);
    },
    playerStateChanged(player) {
      console.log("playerStateChanged", player);
    },

然后啟動服務

npm  run start

發現報錯，無法找到相關的視頻，于是發現缺少相關的庫，還得加上aws的庫才可以
在整個專案的index.html中加入下面的庫支持檔案

  <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.css" rel="stylesheet">
  <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標簽的class必須設定成“video-player vjs-custom-skin”，你引入的樣式才能起作用，增加hls的支持，支持流媒體m3u8g等等格式播放，

增加hls.js支持，故此要安裝依賴，如下：

npm install --save videojs-contrib-hls

這里提供下aws的官方倉庫啊，需要自取哦
https://github.com/aws-samples

補充一下：如果直接在頁面中實作的話，可能無法直接播放，會報錯無法播放視頻，我猜測可能有2個原因，見截圖
在這里插入圖片描述

1：異步獲取后臺回傳的拉流地址的時候，需要一定的時間，這個時間直播組件已經初始化完畢，但是還沒有獲取到直播源地址，所以會報錯找不到直播地址
2：直播組件也有自己一整套完整的生命周期，我們可以檢測不同的生命周期，然后把直播源地址，在請求完畢后放入合適的時間，直播組件會一直請求這個直播地址，從而實作在線直播
這里我為了偷懶，暫時沒有那么多時間去研究一下，等空了會去仔細研究一下，我是把他抽離出一個單組的子組件，通過props來實作地址的傳遞

在這里插入圖片描述

效果一樣一樣的，也可以方便其他組件呼叫

最后為了方便管理，雙手奉上最后的全部代碼
start
1:main.js


// 第一個是videoJs的樣式，后一個是vue-video-player的樣式，因為考慮到我其他業務組件可能也會用到視頻播放，所以就放在了main.js內
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
/*匯入視頻播放組件*/
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer)

2:videoPlayer.vue

<template>
  <video-player
    class="video-player vjs-custom-skin"
    ref="videoPlayer"
    :options="playerOptions"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @statechanged="playerStateChanged($event)"
  ></video-player>
</template>

<script >
//import { registerIVSTech } from "amazon-ivs-player";
export default {
  name: "",
  props: ["src", "image"],
  data() {
    return {
      // liveSrc:
      //   "https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8",
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,瀏覽器準備好時開始回放，
        controls: true, //控制條
        preload: "auto", //視頻預加載
        muted: false, //默認情況下將會消除任何音頻，
        loop: false, //導致視頻一結束就重新開始，
        language: "zh-CN",
        aspectRatio: "16:9", // 將播放器置于流暢模式，并在計算播放器的動態大小時使用該值，值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
        fluid: true, // 當true時，Video.js player將擁有流體大小，換句話說，它將按比例縮放以適應其容器，
        sources: [
          {
            withCredentials: false,
            type: "application/x-mpegURL",
            src: 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無法播放媒體源時顯示的默認資訊，
        controlBar: {
          timeDivider: true, // 當前時間和持續時間的分隔符
          durationDisplay: true, // 顯示持續時間
          remainingTimeDisplay: false, // 是否顯示剩余時間功能
          fullscreenToggle: true // 是否顯示全屏按鈕
        }
      }
    };
  },
  // livePlays() {
  //   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);
  // },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    }
  },
  methods: {
    onPlayerPlay(player) {
      console.log("onPlayerPlay", player);
    },
    onPlayerPause(player) {
      console.log("onPlayerPause", player);
    },
    playerStateChanged(player) {
      console.log("playerStateChanged", player);
    }
  }
};
</script>

3:detail.vue 父組件

<template>
  <d2-container>
    <div>
      <div class="webTitle">直播管理 > 大型直播 > 詳情</div>
      <el-table :data="list" border stripe>
        <el-table-column align="center" label="直播ID">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="直播標題">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="賬號">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="直播開始時間">
          <template slot-scope="scope">
            <span>{{ scope.row.liveStart | timestampFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="觀看人數">
          <template slot-scope="scope">
            <span>{{ scope.row.watchNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="評論數">
          <template slot-scope="scope">
            <span>{{ scope.row.reserveNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="購票金額(GP)">
          <template slot-scope="scope">
            <span>{{scope.row.preSaleType == 1 ? scope.row.preSaleBalance*1 + scope.row.preSaleDeposit *1+ scope.row.fullPayment*1 : scope.row.fullPayment}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="禮物金額">
          <template slot-scope="scope">
            <span>{{ scope.row.reserveNumber }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="playWrap">
        <div class="livePicture">
          <vueVideoPlayers :src="src" :image="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
                class="playContent"
              >{{formData.reserveNumber > formData.reserveNumber ? "已成型":"未成型" }}</span>
            </li>
          </ul>
          <p>非預售資訊</p>
          <ul class="leftInfo">
            <li class="playItem">
              <span class="playTitle">售票開始時間</span>
              <span class="playContent">{{formData.ticketingStart}}</span>
            </li>
          </ul>

          <p>票價</p>
          <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">
                <img
                  v-if="formData.propagandaVideoUrl"
                  :src="videoPng"
                  class="playImage"
                  @click="showVideo(formData.propagandaVideoUrl,true)"
                />
                <span v-else style="color:#cfcfcf">暫無視頻</span>
              </span>
            </li>
            <li class="playItem">
              <span class="playTitle">回訪視頻</span>
              <span class="playContent">
                <img
                  v-if="formData.recordedBroadcastUrl"
                  :src="videoPng"
                  class="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
                  class="matchImg"
                  :src="formData.shareImage"
                  :preview-src-list="[formData.shareImage]"
                />
              </span>
            </li>
            <li class="playItem">
              <span class="playTitle">封面圖片</span>
              <span class="playContent">
                <el-image
                  class="matchImg"
                  v-for="(item,index)  in  JSON.parse(formData.coverImage)"
                  :src="item"
                  :key="index"
                  :preview-src-list="[item]"
                />
              </span>
            </li>
          </ul>
          <!-- <p>影像資料</p>
          <ul class="leftInfo"></ul>-->
        </div>
      </div>
    </div>
    <el-button @click="backPage">回傳</el-button>
    <el-dialog title="查看" :visible.sync="videoVisible" width="850px">
      <div v-if="video">
        <video :src="tempSrc" controls="controls" width="800" height="600">您的瀏覽器不支持 video 標簽，</video>
      </div>
      <div v-else>
        <vueVideoPlayers :src="tempSrc" :image="image" />
      </div>
    </el-dialog>
  </d2-container>
</template>

<script >
import { getLiveDetail, getLiveSellDetail } from "@/api/3d/liveApi";
import videoPng from "@/assets/img/video.png";
import { timestampFormat } from "@/common/filters";
//import { registerIVSTech } from "amazon-ivs-player";
import vueVideoPlayers from "./videoPlayer";

export default {
  name: "",
  data() {
    return {
      src: "", //直播源視頻
      image: "",
      videoPng: videoPng,
      video: true,
      videoVisible: false,
      // videoSrc: "",   //宣傳視頻
      // recordedBroadcastUrl:'',   //回放視頻
      tempSrc: "",
      list: [],
      id: "",
      typeName: "",
      pullUrl: "",
      formData: {
        id: "",
        pullUrl: "",
        pushUrl: "",
        title: "",
        liveIntroduce: "",
        actor: "",
        typeId: "",
        isRecordedBroadcast: 2,
        coverImage: "",
        propagandaVideoUrl: "",
        formingNum: "",
        preSaleDeposit: "", //預售定金價格
        preSaleBalance: "", //預售尾款價格
        fullPayment: "", //全款價格
        playbackPrice: "", //回放價格
        preSale: [], //預售時間
        preSaleStart: "",
        preSaleEnd: "",
        liveStart: "", //直播開始時間
        isSpeak: 1,
        priority: "",
        shareImage: ""
      }
    };
  },
  created() {
    this.getLiveSell();
    this.getData();
  },
  mounted() {},
  components: {
    vueVideoPlayers
  },
  methods: {
    backPage() {
      this.$router.push("/liveMange/largeBrand");
    },
    //售票情況
    getLiveSell() {
      var id = this.$route.params.id;
      getLiveSellDetail(id).then(res => {
        const result = res.data;
      });
    },
    //彈框打開看視頻
    showVideo(playSrc, mark) {
      this.videoVisible = true;
      this.video = mark;
      this.tempSrc = playSrc;
    },
    getData() {
      var id = this.$route.params.id;
      this.id = id;
      //var  localMatchTypeId=localStorage.getItem('matchTypeId')
      //var  localPriority = localStorage.getItem('priority')
      // var data = { id, page: 1, limit: 10 };
      getLiveDetail(id).then(res => {
        const result = res.data;
        //沒有分類ID取本地
        // if(!result.matchTypeId){
        //   result.matchTypeId = localMatchTypeId
        // }
        // if(!result.priority){
        //   result.priority = localPriority
        // }

        this.formData = result;
        let { pullUrl, pushUrl, coverImage } = result;
        this.src = pullUrl;
        this.image = JSON.parse(coverImage)[0];
        const {
          id,
          title,
          liveStart,
          ticketingStart,
          playbackPrice,
          preSaleDeposit,
          preSaleBalance,
          fullPayment
        } = result;

        const objData = {
          id,
          title,
          name: "admin",
          liveStart,
          watchNumber: localStorage.getItem("watchNumber") | 0,
          reserveNumber: localStorage.getItem("reserveNumber") | 0,
          preSaleDeposit,
          preSaleBalance,
          fullPayment,
          ticketingStart,
          playbackPrice
        };

        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(start)
        //this.formData.registration.push(end)
        //手動賦值
        // this.$set(this.formData, "preSale", [preSaleStart, preSaleEnd]);
        //this.$set(this.formData, "vote", [voteStart, voteEnd]);

        //日期格式化
        //預售  時間段
        this.formData.preSaleStart = result.preSaleStart
          ? timestampFormat(result.preSaleStart)
          : "";
        this.formData.preSaleEnd = result.preSaleEnd
          ? timestampFormat(result.preSaleEnd)
          : "";

        //非預售 開始售票時間
        this.formData.ticketingStart = result.ticketingStart
          ? timestampFormat(result.ticketingStart)
          : "";

        this.typeName = localStorage.getItem("typeName") || "";
      });
    }
  }
};
</script>

<style  scoped>
.playWrap {
  display: flex;
  background: #fff;
  margin-top: 20px;
}

.leftInfo {
  list-style: none;
  border: 1px solid #cfcfcf;
}
.playLeft {
  width: 48%;
  /* border: 1px  solid #f5f5f5; */
}
.playRight {
  width: 48%;
  margin-left: 2%;
}
.playItem {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #cfcfcf;
}
.playItem:last-child {
  border-bottom: none;
}
.playContent {
  margin-left: 20px;
  color: #999;
}

.matchImg {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}
.playImage {
  width: 80px;
  height: 80px;
}

.playWrap {
  display: flex;
}
.livePicture {
  width: 40%;
  height: 400px;
}
</style>

3:index.html記得加入如下代碼

 <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.css" rel="stylesheet">
  <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>

end
加油~~~~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/312144.html

標籤：其他

上一篇：JavaScript使用

下一篇：javascript常用函式