封装html标签用例

152 次浏览 2026年 5月 20日下午12:22

## 简介
从版本1.0.0开始，新增自定义元素标签<node-player> </node-player>

## 用例
```
<node-player slot="media" scaleMode="1" bufferTime="500" stats streamType="live" muted autoplay
src="http://192.168.0.2:8000/live/bbb.flv "></node-player>
```

## 加入控制条
NodePlayer.js兼容media-chrome控制条

### 首先引入media-chrome
```
  <script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@1/+esm"></script>
```

### 包装node-player 
```
    <media-controller style="width: 100%;height: 100%;">
      <node-player slot="media" scaleMode="1" bufferTime="500" stats streamType="live" muted autoplay
        src="http://192.168.0.2:8000/live/bbb.flv "></node-player>
      <media-control-bar>
        <media-play-button></media-play-button>
        <media-mute-button></media-mute-button>
        <media-live-button></media-live-button>
        <media-time-display></media-time-display>
        <media-time-range></media-time-range>
        <media-fullscreen-button></media-fullscreen-button>
      </media-control-bar>
    </media-controller>
```

## 效果
![](https://www.nodemedia.cn/doc/server/index.php?s=/api/attachment/visitFile&sign=044f1b23932fd6d7802801b61e6a1a52)

文档

封装html标签用例