video.js引入本地视频
时间: 2023-09-25 19:15:28 浏览: 122
1. 下载video.js的压缩包,解压后得到video.min.js和video-js.css文件。
2. 在html文件中引入video.min.js和video-js.css文件。
```html
<link href="path/to/video-js.css" rel="stylesheet">
<script src="path/to/video.min.js"></script>
```
3. 在html文件中添加video标签,并设置相关属性。
```html
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="path/to/poster.jpg" data-setup="{}">
<source src="path/to/video.mp4" type='video/mp4'>
<source src="path/to/video.webm" type='video/webm'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
```
4. 在js文件中初始化video.js。
```javascript
var player = videojs('my-video');
```
5. 运行html文件,即可播放本地视频。
阅读全文
相关推荐


















