在html使用EasyPlayer.js
时间: 2023-11-16 16:03:59 浏览: 91
要在 HTML 中使用 EasyPlayer.js,你需要先引入 EasyPlayer.js 库文件,可以通过以下代码实现:
```html
<script src="https://unpkg.com/hls.js@latest"></script>
<script src="https://unpkg.com/easyplayer/dist/easyplayer.min.js"></script>
```
然后,在 HTML 中添加一个 `<video>` 标签来创建一个视频播放器:
```html
<video id="my-video"></video>
```
接下来,在 JavaScript 代码中,通过 EasyPlayer.js 提供的 API 来创建播放器和设置播放器属性,例如:
```javascript
var player = new EasyPlayer({
id: 'my-video',
url: 'http://example.com/my-video.mp4',
autoplay: true,
controls: true,
width: 640,
height: 360,
poster: 'http://example.com/my-video-poster.jpg',
subtitles: [
{
src: 'http://example.com/my-video-subtitle-en.vtt',
label: 'English',
default: true
},
{
src: 'http://example.com/my-video-subtitle-zh.vtt',
label: '中文'
}
]
});
```
以上代码创建了一个 ID 为 `my-video` 的视频播放器,设置了视频文件的 URL、自动播放、控制条、宽度、高度、封面图片和字幕等属性。你可以根据自己的需要来设置这些属性。
最后,调用播放器的 `play()` 方法来开始播放视频:
```javascript
player.play();
```
这样就可以在 HTML 中使用 EasyPlayer.js 创建一个简单的视频播放器了。
阅读全文