代码
<video src="http://vjs.zencdn.net/v/oceans.mp4" controls></video>
<video src="" controls></video> controls：控制面板
<video src="" controls preload></video> preload：预加载，与autoplay冲突
<video src="" controls autoplay></video> autoplay：自动播放
<video src="" controls loop></video> loop：循环播放
<video src="" controls muted></video> muted：静音播放
<video src="" controls width></video> width：宽度(像素值)
<video src="" controls height></video> height：高度(像素值)

结果

1. 标签法检测
<video src="" controls>您的浏览器不支持HTML5视频</video>

2. Javascript法检测
代码

<div id="support"></div>
<script>
function test() {
    var supportVideo = !!document.createElement("video").
    canPlayType;
    if (supportVideo) {
        document.getElementById("support").innerHTML = "您的浏览器支持HTML5视频";
    } else {
        document.getElementById("support").innerHTML = "您的浏览器不支持HTML5视频";
    }
}
test ();
</script>

解释
<div id="support"></div> 创建div
function test() {}创建函数
!! 结果转换为布尔值
document.getElementById("support").innerHTML 赋值给div元素
test (); 调用函数

结果

代码

<video controls>
    <source src="video/test.mp4">
    <source src="video/test.ogg">
    您的浏览器不支持HTML5视频
</video>

解释
浏览器先判断音频是否支持mp4格式，支持则播放test.mp4文件
否则判断是否支持ogg格式，支持则播放test.ogg文件
如果都不支持，则返回<video>标签一个错误事件

解释
目前HTML5支持的常用视频格式有：
MPEG4——后缀名为.mp4
Ogg——后缀名为.ogg
WebM——后缀名为.webm
目前尚不存在得到所有浏览器支持的视频格式，
因此在开发过程中，如果不明确用户所使用的浏览器类型，
则需要起码准备两种视频格式备用

代码

<video id="video01" src="http://vjs.zencdn.net/v/oceans.mp4" width="500">
    您的浏览器不支持HTML5视频
</video>
<div>
    <button id="toggleBtn" onclick="toggleVideo()">播放</button>
    <button onclick="bigVideo()">放大</button>
    <button onclick="samllVideo()">缩小</button>
</div>
<script>
    var video01 = document.getElementById("video01");
    var toggleBtn = document.getElementById("toggleBtn");
    function toggleVideo () {
        if (video01.paused) {
            video01.play();
            toggleBtn.innerHTML = "暂停";
        } else {
            video01.pause ();
            toggleBtn.innerHTML = "播放";
        }
    }
    function bigVideo () {
        video01.width = "600";
    }
    function smallVideo () {
        video01.width = "400";
    }
</script>

解释
<video> 创建video对象，去掉controls禁用浏览器自带视频控件
<button> 创建button对象
onclick = "toggleVideo()"点击调用函数
onclick = "bigVideo()"点击调用函数
onclick = "smallVideo()"点击调用函数
function toggleVideo() {}创建函数
function bigVideo() {}创建函数
function samllVideo() {}创建函数
document.getElementById("")获取对象
toggleBtn.innerHTML = ""赋值给对象

结果

解释
HTML5音频和视频都属于HTML5媒体元素，具有一些通用功能：
1. 标记播放时间范围
2. 跳转播放时间点
3. 获取播放时间
4. 终止媒体文件的下载
5. 使用Flash播放器

代码
src="音频或视频的URL地址#t=[starttime][,endtime]"
src="video/test.mp4#t=20,25" 媒体文件从第20秒开始播放，到第25秒结束
src="video/test.mp4#t=,01::50:00" 媒体文件从最开始播放，到第1小时50分结束
src="video/test.mp4#t=20" 媒体文件从第20秒开始播放，到最后结束

解释
使用 # 标志分割媒体文件来源URL和后面补充信息。
starttime 为开始播放时间，省略不写代表默认开始时间为媒体文件的开头。
endtime 为终止播放时间，省略不写代表终止时间为媒体文件的结尾。
starttime 和 endtime 均可以填入整数或者浮点数类型的秒数，也可写作 时:分:秒 的格式

结果

代码

<video id="media02" src="http://vjs.zencdn.net/v/oceans.mp4" controls width="500">
    您的浏览器不支持HTML5视频
</video>
<div>
    <button onclick="changeTime()">跳转至 0:0:20</button>
</div>
<script>
    var media02 = document.getElementById("media02");
    function changeTime () {
        media02.currentTime = 20;
        media02.play();
    }
</script>

解释
<video id="media02"> 创建video对象，并赋予id
<button onclick="changeTime()"> 创建button对象，并添加点击事件
function changeTime() {} 创建函数
var media02 = document.getElementById("media02"); 获取视频文件对象
media.currentTime = 20; 跳转视频文件播放时间点

结果

代码

<video id="media03" src="http://vjs.zencdn.net/v/oceans.mp4" controls width="500">
        您的浏览器不支持HTML5视频
</video>
<br><button onclick="getTime()">点击获取视频时间信息</button>
<div id="status"></div>
<script>
    function getTime() {
        var media03 = document.getElementById("media03");
        var starttime = media03.seekable.start(0);
        var endtime = media03.seekable.end(0);
        var playedtime = media03.played.end(0);
        var status = document.getElementById("status");
        status.innerHTML = "视频开始时间：" + starttime + 
                            "<br>视频结束时间：" + endtime + 
                            "<br>视频已播放时间：" + playedtime;
    }
</script>

解释
<video id="media03"> 创建video对象，并赋予id
<button onclick="getTime()"> 创建button对象，并添加点击事件
<div id="status"> 创建div对象，并赋予id
function getTime() {} 创建函数
var starttime = media03.seekable.start(0); 获取视频文件开始播放的时间
var endtime = media03.seekable.end(0); 获取视频文件结束播放的时间
var playedtime = media03.played.end(0); 获取视频文件已经播放的时长
status.innerHTML = "" 传递赋值

解释
HTML5媒体文件API允许获取媒体播放的开始与结束时间，需要使用 seekable 属性；
seekable 属性的 start(index) 方法用于获取开始时间，end(index)用于获取结束时间；
其中index表示媒体文件的来源序号，默认只有一个的情况填数字0。

解释
HTML5媒体文件同时也允许获取媒体当前播放时间点，需要使用 played 属性;
played属性也包含start(index)和end(index)，已播放时间为两者之差;
如果默认从0开始播放，则当前播放时间点即已经播放的时长，可仅用end()方法。

结果

点击获取视频时间信息

代码

<video id="media04" src="http://vjs.zencdn.net/v/oceans.mp4" controls>
    您的浏览器不支持HTML5视频</video>
<br><button onclick="startMedia()">点击恢复视频 (play)</button>
<br><button onclick="stopMedia01()">点击终止下载 (src)</button>
<br><button onclick="stopMedia02()">点击终止下载 (removeAttribute)</button>
<script>
    function stopMedia01() {
        var media04 = document.getElementById("media04");
        media04.pause();
        media04.removeAttribute("src");
    }
    function stopMedia02() {
        var media04 = document.getElementById("media04");
        media04.pause();
        media04.src="";
    }
    function startMedia() {
        var media04 = document.getElementById("media04");
        media04.src="http://vjs.zencdn.net/v/oceans.mp4";
        media04.play();
    }
</script>

解释
<video id="media04">创建video对象，并赋予id
<button onclick="stopMedia()">创建button对象，并添加点击事件
function stopMedia() {}创建函数
var media04 =document.getElementById("media04");获取对象
media04.pause();暂停媒体文件的播放
media04.src="";将src属性设置为空值

解释
HTML5中的pause()方法可以用于暂停媒体文件的播放，
但是即使处在暂停状态，浏览器仍然会在后台继续下载。
解决办法是先暂停媒体文件的播放，然后将其 src属性去除，或设置为空。

结果

点击恢复视频 (play)
点击终止下载 (removeAttribute)
点击终止下载 (src)

代码

<video src="test.mp4" controls>
    <object data="flash/test.swf" type="application/x-shockwave-flash" width="640" height="480">
        <param name="movie" value="flash/test.swf">
        <param name="flashvars" value="file=D:/video/test.mp4">
    </object>
</video>

解释
目前 Flash 几乎已经没有主流应用场景；
所有主流浏览器 Chrome、Edge、Firefox、Safari均已在 2021 年初彻底屏蔽了原生的 Flash 插件接口；
官方 Adobe Flash Player 也于 2020 年 12 月 31 日停止维护，
并在 2021 年 1 月 12 日起强制阻止任何 Flash 内容运行。
当下想“在浏览器里直接打开 .swf”
只能依赖模拟器（如 Ruffle）
或回退到老旧版本的浏览器，再外挂第三方“Clean Flash”
二者都不是官方支持方案，仅用于临时兼容个别遗留站点。

解释
当浏览器不支持HTML5媒体API时，会执行标签收尾内部的内容;
利用此原理，可以为浏览器准备一个Flash播放器选项。
当<video>标签不被支持时，浏览器会执行其内部的<object>相关内容

解释
需要注意的是，只有IE浏览器可以接受为该<object>标签添加id或class属性；
因此尽量不要为浏览器添加此类属性，以保证兼容性最大化；
Flash播放器仅支持.flv或.mp4格式的视频播放。

解释
<video src="test.mp4" controls>
如果浏览器能播 <video> 就用原生播放器
如果浏览器不支持或路径错误导致打不开，则使用Flash作为备选项进行播放
<object data="flash/test.swf" type="application/x-shockwave-flash" width="640" height="480">
data=""即外部资源路径， type="" 即声明Flash的MIME类型
MIME类型由“文件格式规范”统一规定，具体需要查表。
MIME类型常见值：

    Flash：application/x-shockwave-flash
    PDF：application/pdf
    MP4：video/mp4
    Silverlight：application/x-silverlight-2
    普通EXE：application/octet-stream

width="" height="" 代表浏览器把 640×480 的矩形区域交给 Flash 插件（或 Ruffle 模拟器）
建议指定宽高，否则可能出现浏览器无法预留占位、画面拉伸或出现滚动条、响应式页面更难控制等问题
<param name="movie" value="flash/test.swf">
<param name="flashvars" value="file=D:/video/test.mp4">
在<object>标签里，浏览器只负责把对象（Flash、PDF、Java Applet …）拉起来，
插件启动后的细节（加载哪个主文件、用什么尺寸、传哪些自定义参数...）就靠<params>逐条传进去，
即以一组键值对的形式初始化插件，变量名是根据官方配置表规定好的。
name=""即变量名，value=""即变量值。
以Adobe Flash Player为例。<param>标签的常见变量名：

    movie：主swf文件的URL（必写）
    quality：渲染质量（low / medium / high / best）
    bgcolor：背景色（#RRGGBB）
    wmode：窗口模式（window / opaque / transparent）
    allowfullscreen：是否允许全屏（true / false）
    flashvars：自定义“散包”参数串，用 & 拼接（k1=v1&k2=v2…）
    allowScriptAccess：脚本跨域权限（always / sameDomain / never）

PDF 插件。<param>标签的常见变量名：src、view、page
Java Applet。<param>标签的常见变量名：code、codebase、archive
QuickTime。<param>标签的常见变量名：src、autoplay、controller