vue 遍历 摄像头的flv流

  npm install --save flv.js       import flvjs from "flv.js";         <template>   <div class="box">     <div v-for="(item, index) in videoList" :key="index">             <div class="bg-purple">         <video         :id="'video' + item.id"         style="width: 500px; height: 300px"         controls         autoplay         muted>         </video>         </div>             </div>   </div> </template> <script> //=> 引入flv.js import flvjs from "flv.js"; export default {
  data() {     return {             videoList: [         {           src: "http://170.16.0.46:8081/live/110.live.flv",           id: 0,         },         {           src: "http://170.16.0.46:8081/live/101.live.flv",           id: 1,         },         {           src: "http://170.16.0.46:8081/live/99.live.flv",           id: 2,         },         {           src: "http://170.16.0.46:8081/live/110.live.flv",           id: 3,         },         {           src: "http://170.16.0.46:8081/live/110.live.flv",           id: 4,         },         {           src: "http://170.16.0.46:8081/live/110.live.flv",           id: 5,         },       ],     };   },   mounted() {     this.startPlay();   },   methods: {     //视频浏览     startPlay() {        this.videoList.map((item,index) => {            console.log("flvjs不支持");        });       this.videoList.forEach((item, index) => {         if (flvjs.isSupported()) {           let player = null;           let videoElement = document.getElementById("video" + item.id);           player = flvjs.createPlayer({             type: "flv", //=> 媒体类型 flv 或 mp4             isLive: true, //=> 是否为直播流             hasAudio: false, //=> 是否开启声音             url: item.src, //=> 视频流地址           });           player.attachMediaElement(videoElement); //=> 绑DOM           player.load();           player.play();         } else {           console.log("flvjs不支持");         }       });     },   }, }; </script>
<style scoped>    .box {     width: 100%;     height: 1000px;     overflow-y:scroll;     overflow-x:hidden;     white-space: nowrap;    }    .bg-purple {     background: #d3dce6;     border:2px solid;     border-radius: 5px;     min-height: 300px;        }
</style>

标签：src,遍历,170.16,flv,live,vue,0.46,id
来源： https://www.cnblogs.com/Michael-YangJun/p/16269125.html