video.js poster
时间: 2023-10-20 14:07:28 浏览: 58
video.js的poster属性是用于设置视频播放器在视频加载之前显示的图片。在引用的代码中,poster属性被设置为"../../../../static/record/recordLu.png",这意味着当视频加载之前,播放器会显示这张图片作为视频的封面。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [Video.js 动态渲染多个直播流视频](https://blog.csdn.net/weixin_39475476/article/details/103956051)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]
相关问题
uniapp 使用 video.js
UniApp是一个基于Vue.js的跨平台开发框架,可以用于开发iOS、Android、H5等多个平台的应用程序。而video.js是一个开源的HTML5视频播放器库,可以在网页上方便地嵌入和控制视频播放。
要在UniApp中使用video.js,可以按照以下步骤进行操作:
1. 在UniApp项目中安装video.js库。可以通过npm或者直接下载video.js的源码文件。
2. 在需要使用视频播放功能的页面中引入video.js库。可以在页面的`<script>`标签中使用`import`语句引入video.js库。
3. 在页面中创建一个`<video>`标签,并设置相应的属性和事件。可以通过设置`src`属性指定视频文件的路径,通过设置`controls`属性显示视频播放控制条,通过设置`poster`属性显示视频封面图等。
4. 在页面的`<script>`标签中编写相应的逻辑代码。可以通过调用video.js提供的API来控制视频的播放、暂停、音量调节等操作。
需要注意的是,UniApp是一个跨平台开发框架,而video.js是一个基于HTML5的库,所以在不同平台上可能会有一些差异和限制。在使用过程中,建议查阅UniApp和video.js的官方文档,以获取更详细的使用说明和示例代码。
video.js播放m3u8
要在video.js中播放m3u8文件,你需要使用video.js-contrib-hls插件。这个插件可以让video.js支持HLS流媒体播放。
首先,在你的HTML文件中引入video.js和video.js-contrib-hls插件:
```html
<head>
<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@5.15.0/dist/videojs-contrib-hls.min.js"></script>
</head>
```
然后,在你的视频标签中添加data-setup属性和type属性,指定视频类型为application/x-mpegURL:
```html
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
data-setup='{"fluid": true}' poster="MY_VIDEO_POSTER.jpg">
<source src="MY_VIDEO.m3u8" type="application/x-mpegURL">
</video>
```
最后,在你的JavaScript代码中初始化video.js并启用video.js-contrib-hls插件:
```javascript
var player = videojs('my-video');
player.play();
```
这样就可以在video.js中播放m3u8文件了。注意,HLS是苹果公司提出的一种流媒体传输协议,如果你的浏览器不支持HLS,那么视频将无法播放。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)