<video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        您的浏览器不支持 HTML5 video 标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
<div style="text-align:center">
        <button>播放/暂停</button>
        <button>放大</button>
        <button>缩小</button>
        <button>普通</button>
        <br>
        <video id="video1" width="420">
                <source src="mov_bbb.mp4" type="video/mp4">
                <source src="mov_bbb.ogg" type="video/ogg">
                您的浏览器不支持 HTML5 video 标签。
        </video>
</div>

<script>
        var myVideo=document.getElementById("video1");
        function playPause(){
                if (myVideo.paused)
                        myVideo.play();
                else
                        myVideo.pause();
        }
        function makeBig(){
                myVideo.width=560;
        }
        function makeSmall(){
                myVideo.width=320;
        }
        function makeNormal(){
                myVideo.width=420;
        }
</script>
HTML 音频/视频 DOM 参考手册；

互联网上的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
<audio controls>
        <source src="horse.ogg" type="audio/ogg">
        <source src="horse.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
</audio>
<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg；

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
<form action="demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>
<form action="demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>
<form action="demo-form.php">
  生日 (日期和时间)（UTC时间）: <input type="datetime" name="bdaytime">
  <input type="submit">
</form>
<form action="demo-form.php">
  生日 (日期和时间)（无时区）: <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>
<form action="demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9  及更早 IE 版本不支持 type="email" 。</p>            
<form action="demo-form.php">
  生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>
<form action="demo-form.php">
  数量(1到5之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
<p><b>注意:</b>Internet Explorer 9 及更早 IE 版本不支持 type="number" 。</p>
使用下面的属性来规定对数字类型的限定：

属性        描述
disabled        规定输入字段是禁用的
max        规定允许的最大值
maxlength        规定输入字段的最大字符长度
min        规定允许的最小值
pattern        规定用于验证输入字段的模式
readonly        规定输入字段的值无法修改
required        规定输入字段的值是必需的
size        规定输入字段中的可见字符数
step        规定输入字段的合法数字间隔
value        规定输入字段的默认值
<form action="demo-form.php" method="get">
        Points: <input type="range" name="points" min="1" max="10">
        <input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9 及更早 IE 版本不支持 type="range"。</p>
请使用下面的属性来规定对数字类型的限定：

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
<form action="demo-form.php">
  Search Google: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>
<form action="demo-form.php">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>
<form action="demo-form.php">
  选择时间（无时区）: <input type="time" name="usr_time">
  <input type="submit">
</form>
<form action="demo-form.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本不支持 type="url" 。</p>
<form action="demo-form.php">
  选择周（无时区）: <input type="week" name="year_week">
  <input type="submit">
</form>

---------------------
【转载，仅作分享，侵删】
作者：hhjian6666
原文：https://blog.csdn.net/qq_30796379/article/details/88314143
版权声明：本文为博主原创文章，转载请附上博文链接！

奈斯，感谢分享