HTML5视频

HTML5视频


<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>

不播放的样式
HTML5视频_第1张图片
controls 向用户展示播放控件

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

HTML5视频_第2张图片

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

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

HTML5视频_第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>

属性表

HTML5视频_第4张图片
ps:本图来自黑马程序员

你可能感兴趣的:(web,html,html5)