在实际项目中,可能会出现需要播放视频流的需求,网上也提供了许多的方法和插件,但是多数都是只支持一种或者支持播放格式不全面的介绍尤其是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>