uni-app之video视频组件

﹏ヽ暗。殇╰゛Y 2023-02-15 05:27 4阅读 0赞

## 一.平台差异说明 ##

![在这里插入图片描述][20200604172350192.png]

## 二.属性说明 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20200604172617432.png]  
备注：video默认宽度 300px、高度 225px，可通过 css 设置宽高。  
![在这里插入图片描述][20200604172711716.png]  
![在这里插入图片描述][20200604172733399.png]  
![在这里插入图片描述][20200604172746789.png]

## 三.案例实战 ##

1.video界面

2.css样式

.page video{ 
    	width: 750rpx;
    }

2.实现效果  
![在这里插入图片描述][20200604172930567.png]  
![在这里插入图片描述][2020060417301984.png]

[20200604172350192.png]: https://img-blog.csdnimg.cn/20200604172350192.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604172444650.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200604172504937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200604172542437.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz,size_16,color_FFFFFF,t_70
[20200604172617432.png]: https://img-blog.csdnimg.cn/20200604172617432.png
[20200604172711716.png]: https://img-blog.csdnimg.cn/20200604172711716.png
[20200604172733399.png]: https://img-blog.csdnimg.cn/20200604172733399.png
[20200604172746789.png]: https://img-blog.csdnimg.cn/20200604172746789.png
[20200604172930567.png]: https://img-blog.csdnimg.cn/20200604172930567.png
[2020060417301984.png]: https://img-blog.csdnimg.cn/2020060417301984.png