当前位置：主页 > 查看内容

HTML5视频

发布时间：2021-07-31 00:00| 有 位朋友查看

简介：HTML5视频 !DOCTYPE html html lang en head meta charset UTF-8 / meta name viewport content widthdevice-width, initial-scale1.0 / meta http-equiv X-UA-Compatible content ieedge / title HTML5新增视频标签 / title style video { width : 100% ; }……

HTML5视频

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML5新增视频标签</title>
    <style>
      video {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <video src="media/mi.mp4"></video>
  </body>
</html>

不播放的样式
1
controls 向用户展示播放控件

<video src="media/mi.mp4" controls></video>

2

poster=" " 视频还在加载的时候显示这张图片

    <video src="media/mi.mp4" controls poster="media/mi9.jpg"></video>

3
可以设置宽高

<video src="media/mi.mp4" controls poster="media/mi9.jpg" width="500px"></video>

4

由于录制视频有些麻烦这里就不配录制视频了

autoplay 视频自动播放 谷歌浏览器中需要加上muted

    <video src="media/mi.mp4" autoplay muted></video>

loop 循环播放

    <video src="media/mi.mp4" loop></video>

preload="auto" 预先加载视频 preload="none" 不预先加载视频 有自动播放autoplay 时不用考虑这个

muted静音播放 和自动播放搭配使用

    <video src="media/mi.mp4" muted></video>

属性表

属性
ps:本图来自黑马程序员

；原文链接：https://blog.csdn.net/m0_56787796/article/details/115774352
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：4.17训练日记 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐