easywasmplayer实现视频流播放示例详解
更新时间：2023年09月22日 09:04:05 作者：huaweichenai
这篇文章主要为大家介绍了easywasmplayer实现视频流播放示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
一：介绍
easywasmplayer文档地址：https://www.npmjs.com/package/easywasmplayer
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。
二：html+js实现视频流播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EasyWasmPlayer-Demo</title>
<script src="./EasyWasmPlayer.js"></script>
<style>
.box {
width:600px;
height:400px;
}
</style>
</head>
<body>
<div class="box">
<div id="Player"></div>
</div>
<script>
// 实例化播放器
var Player = new WasmPlayer(null,'Player',callbackFun,{cbUserPtr:this, decodeType:"auto", openAudio:1, BigPlay:false, Height:true});
// 调用播放
Player.play('视频流地址', 1);
//播放事件回调
function callbackFun(e) {
console.log(e)
}
</script>
</body>
</html>三：vue实现视频流播放
1：安装easywasmplayer
npm install @easydarwin/easywasmplayer --save
2：拷贝
将@easydarwin/easywasmplayer/EasyWasmPlayer.js和@easydarwin/easywasmplayer/libDecoder.wasm拷贝到项目public目录下
3：在public目录下的index.html引入easywasmplayer
<!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" rel="external nofollow" />
<title>EasyWasmPlayer-Demo</title>
<script src="./EasyWasmPlayer.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>4：使用easywasmplayer实现视频流播放
<template>
<div class="box">
<div id="Player"></div>
</div>
</template>
<script>
export default {
data() {
return {
player: '',
url: '视频流地址'
}
},
mounted() {
// 实例化播放器
this.player = new WasmPlayer(null, 'Player', this.callbackfun)
// 调用播放
this.player.play(this.url, 1)
},
methods: {
//播放事件回调
callbackfun(e) {
console.log('callbackfun', e);
}
}以上就是easywasmplayer实现视频流播放示例详解的详细内容，更多关于easywasmplayer视频流播放的资料请关注脚本之家其它相关文章！
相关文章
要保留小数点后N位的问题，经过一番思索，终于解决了，这篇文章主要介绍了js输出数据精确到小数点后n位代码，感兴趣的朋友可以参考一下2016-07-07
这篇文章主要为大家详细介绍了原生js实现密码输入框值的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
如果一个函数访问了此函数的父级及父级以上的作用域变量,那么这个函数就是一个闭包,本文将给大家分享js闭包的6种应用场景,文中有详细的代码示例,需要的朋友可以参考下2023-09-09
所有浏览器都支持该功能IE浏览器不能低于IE10.整个CORS通信过程都是浏览器自动完成不需要用户参与。对于开发者来说CORS通信与同源的AJAX通信没有差别代码完全一样浏览器一旦发现AJAX请求跨源就会自动添加一些附加的头信息有时还会多出一次附加的请求，但用户不会有感觉。2016-04-04
接触jQuery很长时间了，对其的实现有太多疑问，可谓只知道皮毛，对其的精髓一窍不通，可悲啊！所以有必要研究下其中的原理。2010-11-11
使用uniapp打包微信小程序时主包和vendor.js过大解决(uniCloud的插件分包)
每个使用分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar页面,以及一些所有分包都需用到公共资源/JS 脚本,下面这篇文章主要给大家介绍了关于使用uniapp打包微信小程序时主包和vendor.js过大解决的相关资料,,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了javascript编写简易计算器的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了JS实现的车标图片提示效果代码,涉及JavaScript鼠标事件触发页面元素遍历修改的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
下面小编就为大家带来一篇js中string和number类型互转换技巧(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了基于leaflet.js实现修改地图主题样式的流程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
最新评论