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视频流播放的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Bootstrap table分页问题汇总
这篇文章主要为大家汇总了Bootstrap table分页的典型问题，以及对应每个bootstrap table分页问题的解决方法，感兴趣的小伙伴们可以参考一下
2016-05-05
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
这篇文章主要介绍了JavaScript编程设计模式之观察者模式(Observer Pattern),简单说明了观察者模式的概念、原理并结合实例形式详细给出了观察者模式的相关实现与使用技巧,需要的朋友可以参考下
2017-10-10
实例详解BootStrap的动态模态框及静态模态框
要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样。接下来通过实例代码给大家介绍BootStrap的动态模态框及静态模态框,需要的朋友可以参考下
2018-08-08
JavaScript实现兼容IE6的收起折叠与展开效果实例
这篇文章主要介绍了JavaScript实现兼容IE6的收起折叠与展开效果,结合具体实例形式分析了javascript事件响应及针对页面元素属性的动态操作相关实现技巧,需要的朋友可以参考下
2017-09-09
JS try catch基本用法以及常见的异常处理
JS异常处理的作用是帮助开发者识别和处理运行时的错误和异常情况,确保程序在出现问题时能够优雅地降级或恢复,而不是导致整个应用崩溃或产生不可预测的行为,这篇文章主要介绍了JS try catch基本用法以及常见的异常处理,需要的朋友可以参考下
2025-04-04
Javascript 类型转换、封闭函数及常见内置对象操作示例
这篇文章主要介绍了Javascript 类型转换、封闭函数及常见内置对象操作,结合实例形式分析了JavaScript类型显示转换、隐式转换、变量作用域、封闭函数及常用内置对象相关操作技巧,需要的朋友可以参考下
2019-11-11
js前端URL含有特殊字符的转码的实现
本文主要介绍了js前端URL含有特殊字符的转码的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
前端日历插件VCalendar的简单使用方法
这篇文章主要介绍了VCalendar的安装和使用方法,包括如何通过官网地址引入API,并在项目中全局引入main.js文件,使用VCalendar可以实现日历功能,需要的朋友可以参考下
2025-01-01
js自定义弹框插件的封装
这篇文章主要为大家详细介绍了js自定义弹框插件的简单封装，自己封装一个弹框插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
javascript的offset、client、scroll使用方法详解
javascript的offset、client、scroll在使用过程中非常频繁，接下来将对此进行一一介绍，需要了解的朋友可以详细参考下
2012-12-12