标签：src 遍历 170.16 flv live vue 0.46 id

  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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。