vue 项目中 播放视频流及生产环境出现找不到文件解决办法

在实际项目中,可能会出现需要播放视频流的需求,网上也提供了许多的方法和插件,但是多数都是只支持一种或者支持播放格式不全面的介绍尤其是H265 格式视频,现在整理了一个支持比较全的视频流插件 Easywasmplayer。

        首先要去官网下载 Easywasmplayer 插件,然后将解压后的文件放在 静态 public 目录下,主要是这两个文件。然后再html 文件中进行引用。

可能会出现问题:
        使用的时候,本地调试的时候可能没有问题,但是实际发布到生产环境后,会出现找不到 libDecoder.wasm 文件的问题,这是应为 Easywasmplayer.js 文件里面引入的路径是相对于根文件的目录下去查找的,所以会出现找不到文件的问题,

解决办法:在Easywasmplayer.js 搜索 libDecoder.wasm,改变路径

具体使用:

<template>
    <div>
      <div id="configPTZPlayer"></div>
    </div>
  </template>
  
  <script>
  export default {
    mounted(){
     let infoItem = {
				container: "configPTZPlayer",
				url: 'https://video.dcyun.com:10000/rtp/gb_play_31760000541110010003_31760000001320000001.live.flv?auth=870ed2a6-bd9b-4c31-b4b1-f4c250242267',  //EZOPEN低功耗播放地址
				accessToken: '',  //低功耗需要的accessToken
				type: 'FLV',    //视频类型,FLV,HLS,EZOPEN
				cameraid: "123", //视频id,用于回调自取
			};
      window.videoTypePlay(infoItem) 
    }
   }
 
   
  </script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值