vue及H5中使用easywasmplayer H265播放器

最新推荐文章于 2024-08-16 07:31:28 发布

Nie2014

最新推荐文章于 2024-08-16 07:31:28 发布

阅读量1.3w

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Nie2014/article/details/114651376

版权

本文介绍了如何在Vue和HTML中集成EasyWasmPlayer，一个支持多种协议和H.265编码的H5播放器。详细步骤包括在Vue中安装插件、拷贝文件、引用资源以及调用播放器方法。提供了官方文档链接、示例代码和注意事项。

摘要由CSDN通过智能技术生成

EasyWasmPlayer播放器，就是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）、WS-FLV视频直播与视频点播等多种协议，重点在于该播放器是一款支持H5的播放器，可以兼容H.265编码格式视频在web浏览器上面的直播。

参考资料：
该播放器可以实现在html中集成以及vue中集成。
具体的文档在easywasmplayer安装包的readme文档中有介绍。
在这里插入图片描述
详细的html、vue示例代码：github示例项目代码

官方的文档地址：
开源中国：https://my.oschina.net/u/4619556
CSDN：https://blog.csdn.net/xiejiashu
github：https://github.com/tsingsee
博客园：https://www.cnblogs.com/EasyNVR/

https://gitee.com/organizations/scitechlabs/projects

一、在vue中使用easywasmplayer

1、安装插件

 npm install @easydarwin/easywasmplayer --save

安装之后在当前项目文件夹中的node-modules目录中能够找到@easydarwin–>easywasmplayer：
在这里插入图片描述

2、拷贝文件到项目public文件夹中

将EasyWasmPlayer.js以及libDecoder.wasm文件拷贝到vue项目的public文件夹下：
在这里插入图片描述

3、在public目录index.html中添加引用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>EasyWasmPlayer-Demo</title>
    <--添加如下引用-->
    <script src="./EasyWasmPlayer.js"></s