### Start Playback
Source: https://github.com/nodemedia/nodeplayer.js/blob/master/docs/quick-start.md
Initiate video playback by calling the start method with the stream URL.
```javascript
player.start("http://pull.yourdomain.com/live/stream.flv");
```
--------------------------------
### HTML Canvas Setup
Source: https://github.com/nodemedia/nodeplayer.js/blob/master/docs/quick-start.md
All NodePlayer integration methods require a canvas element with a defined ID for rendering the video stream.
```html
```
--------------------------------
### Listen to Player Events
Source: https://github.com/nodemedia/nodeplayer.js/blob/master/docs/quick-start.md
Implement event listeners for various player states such as 'start', 'stop', 'error', 'videoInfo', 'audioInfo', and 'stats'. It is mandatory to listen to the 'error' event.
```javascript
player.on("start", () => {
// 当连接成功并收到数据
});
player.on("stop", () => {
// 当本地stop或远端断开连接
});
player.on("error", (e) => {
// 当连接错误或播放中发生错误
});
player.on("videoInfo", (w, h) => {
//当解析出视频信息时回调
console.log("player on video info width=" + w + " height=" + h);
})
player.on("audioInfo", (r, c) => {
//当解析出音频信息时回调
console.log("player on audio info samplerate=" + r + " channels=" + c);
})
player.on("stats", (stats) => {
// 每秒回调一次流统计信息
console.log("player on stats=", stats);
})
```
--------------------------------
### React Player Integration
Source: https://github.com/nodemedia/nodeplayer.js/blob/master/docs/quick-start.md
Integrate NodePlayer in a React application using the ESM version. This example demonstrates setting up the player within a useEffect hook and includes cleanup logic.
```javascript
import { useState, useEffect, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import './LiveDetail.css';
import NodePlayerFactory from "./NodePlayer-esm.min";
const { NodePlayer } = await NodePlayerFactory();
useEffect(() => {
const player = new NodePlayer();
player.on("error", (error) => {
console.log("Player on error", error);
});
player.on("stats", (stats) => {
console.log("Player on stats", stats)
});
player.setView("videoView");
player.setBufferTime(1000);
player.start("http://192.168.0.2:8000/live/bbb.flv");
return () => {
player.stop();
player.release();
};
}, []);
```
--------------------------------
### Load Player with async/await (WASM)
Source: https://github.com/nodemedia/nodeplayer.js/blob/master/docs/quick-start.md
If using async/await syntax, use NodePlayer.asyncLoad() to wait for the WASM module to compile before instantiating the player.
```javascript
await NodePlayer.asyncLoad()
var player = new NodePlayer();
```
--------------------------------
### Load Player with WASM
Source: https://github.com/nodemedia/nodeplayer.js/blob/master/docs/quick-start.md
Use NodePlayer.load() to asynchronously load the WebAssembly module before creating the player instance. This is necessary due to WASM's asynchronous compilation in Chrome.
```javascript
var player;
NodePlayer.load(()=>{
player = new NodePlayer();
});
```
--------------------------------
### Create Player Object (asm.js)
Source: https://github.com/nodemedia/nodeplayer.js/blob/master/docs/quick-start.md
Instantiate the NodePlayer object directly after including the asm.js version of the library.
```javascript
var player = new NodePlayer();
```
--------------------------------
### Auto-play with Tag
Source: https://github.com/nodemedia/nodeplayer.js/blob/master/docs/quick-start.md
Implement auto-play functionality using the HTML tag. This tag functions similarly to the