video-01-详解使用和属性说明

偏执的太偏执、 2023-10-12 23:19 15阅读 0赞

> **video标签可以通过简单的属性设置来进行视频播放，我们初学可以先做简单学习，但是高级操作就需要video对象来完成高阶玩法**

**目录**

一、参考资料

1.1文档

1..2视频

二、简单使用

三、标签属性

3.1使用案例

--------------------

## 一、参考资料 ##

### 1.1文档 ###

[HTML <video> 标签][HTML _video_]

### 1..2视频 ###

[详解video对象，看完必会，你也能写一个视频播放器(一)\_哔哩哔哩\_bilibili][video_bilibili]

[详解video对象，看完必会，你也能写一个视频播放器(二)\_哔哩哔哩\_bilibili][video_bilibili 1]

[详解video对象，看完必会，你也能写一个视频播放器(三)\_哔哩哔哩\_bilibili][video_bilibili 2]

[详解video对象，看完必会，你也能写一个视频播放器(四)\_哔哩哔哩\_bilibili][video_bilibili 3]

## 二、简单使用 ##

<video src="video.mp4" controls="controls">
    您的浏览器不支持 video 标签。
    </video>

## 三、标签属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/att_video_autoplay.asp" title="autoplay" rel="nofollow">autoplay</a></td> 
   <td>autoplay</td> 
   <td>如果出现该属性，则视频在就绪后马上播放。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/att_video_controls.asp" title="controls" rel="nofollow">controls</a></td> 
   <td>controls</td> 
   <td>如果出现该属性，则向用户显示控件，比如播放按钮。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/att_video_height.asp" title="height" rel="nofollow">height</a></td> 
   <td><em>pixels</em></td> 
   <td>设置视频播放器的高度。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/att_video_loop.asp" title="loop" rel="nofollow">loop</a></td> 
   <td>loop</td> 
   <td>如果出现该属性，则当媒介文件完成播放后再次开始播放。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/att_video_muted.asp" title="muted" rel="nofollow">muted</a></td> 
   <td>muted</td> 
   <td>规定视频的音频输出应该被静音。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/att_video_poster.asp" title="poster" rel="nofollow">poster</a></td> 
   <td><em>URL</em></td> 
   <td>规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/att_video_preload.asp" title="preload" rel="nofollow">preload</a></td> 
   <td>preload</td> 
   <td> <p>如果出现该属性，则视频在页面加载时进行加载，并预备播放。</p> <p>如果使用 "autoplay"，则忽略该属性。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/att_video_src.asp" title="src" rel="nofollow">src</a></td> 
   <td><em>url</em></td> 
   <td>要播放的视频的 URL。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/tags/att_video_width.asp" title="width" rel="nofollow">width</a></td> 
   <td><em>pixels</em></td> 
   <td>设置视频播放器的宽度。</td> 
  </tr> 
 </tbody> 
</table>

### 3.1使用案例 ###

[HTML _video_]: https://www.w3school.com.cn/tags/tag_video.asp
[video_bilibili]: https://www.bilibili.com/video/BV1CT4y1v7gM/?spm_id_from=333.788.recommend_more_video.-1&vd_source=9497a07b4c66a69fcd28375760bc991e
[video_bilibili 1]: https://www.bilibili.com/video/BV1iF411x7kw/?spm_id_from=333.788.recommend_more_video.-1&vd_source=9497a07b4c66a69fcd28375760bc991e
[video_bilibili 2]: https://www.bilibili.com/video/BV1qb4y1p7Mo/?spm_id_from=333.788.recommend_more_video.2&vd_source=9497a07b4c66a69fcd28375760bc991e
[video_bilibili 3]: https://www.bilibili.com/video/BV1YZ4y167TM/?spm_id_from=333.788.recommend_more_video.0&vd_source=9497a07b4c66a69fcd28375760bc991e