詳解Vue實現直播功能

阿新 • • 發佈：2021-10-19

最近公司剛好在做直播，那麼今天就記錄一下遇到的坑，公司伺服器用的亞馬遜aws，所以直接看官方的api就可以了，aws官方地址aws直播api
先看下具體的實現後的效果圖把

在這裡插入圖片描述

按照網上成熟的方法，使用的是video.,然後aws做了一層封裝，那麼我們直接拿來使用把,這裡使用版本的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.')
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/apiwww.cppcns.com/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!',// 視訊播完回撥
        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!',//媒體的readyState為HAVE_ENOUGH_DATA或更高。這意味著可以在不緩衝的情況下播放整個媒體檔案。
        onPlayerCanplaythrough(player) {
          // console.log('player Canplaythrough!',//播放狀態改變回調
        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",playerStateChanged(player) {
      console.log("playerStateChanged",

然後啟動服務

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://.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,//播放速度
        autoplay: false,瀏覽器準備好時開始回放。
        controls: true,//控制條
        preload: "auto",//視訊預載入
        muted: false,//預設情況下將會消除任何音訊。
        loop: false,//導致視訊一結束就重新開始。
        language: "zh-CN",// 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
        fluid: true,// 當vOJDGsvZGttrue時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
        sources: [
          {
            withCredentials: false,src: this.src
            //  "https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8"
          }
        ],//你的封面地址
        //width: 200 || document.documentElement.clientWidth,//允許覆蓋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;
    }
  },methods: {
    onPlayerPlay(player) {
      console.log("onPlayerPlay",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}vOJDGsvZGt}</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.jpg";
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: "",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.formwww.cppcns.comData = 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,name: "admin",watchNumber: localStorage.getItem("watchNumber") | 0,reserveNumber: localStorage.getItem("reserveNumber") | 0,fullPayment,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.ticketingStvOJDGsvZGtart)
          : "";

        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
加油~~~~

到此這篇關於Vue實現直播功能的文章就介紹到這了,更多相關Vue實現直播內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

詳解Vue實現直播功能

詳解Vue實現直播功能

詳解vue實現座標拾取器功能示例

詳解vue-flickity的fullScreen功能實現

詳解Vue中的MVVM原理和實現方法

詳解vue 元件的實現原理

詳解Vue的非同步更新實現原理

詳解vue之自行實現派發與廣播(dispatch與broadcast)

vue+webrtc(騰訊雲) 實現直播功能的實踐

詳解Python實現進度條的4種方式

詳解vue中v-bind:style效果的自定義指令

詳解Vue的ref特性的使用

詳解Vue template 如何支援多個根結點

詳解Vue 單檔案元件的三種寫法

詳解vue或uni-app的跨域問題解決方案

vue實現計算器功能

詳解vue beforeEach 死迴圈問題解決方法

詳解Vue中的Props與Data細微差別

詳解vue-template-admin三級路由無法快取的解決方案

詳解Python 實現 ZeroMQ 的三種基本工作模式

詳解vue中在迴圈中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法

詳解Vue實現直播功能

相關推薦