1、基本语法（Basic Syntax）
常用的 HTML5 Video 标签含有 src、poster、preload (none, metadata, auto)、controls、width、height 等几个属性，以及一个内部使用的标签。

<video width="810" height="456" poster="/usr/xxx.jpg" preload="none" controls="controls">
<source src="/usr/xxx.mp4"/>
</video>

2、对象填充（Object Fit）
对象填充属性（object-fit）用于指定视频在其容器中的布局方式。下面是一些常用的对象填充属性值：
fill：默认值，视频会完全填充容器，可能会导致视频的原始比例发生变化。
contain：视频将等比例缩放以适应容器的宽度和高度，可能会露出空白区域。
cover：视频将等比例缩放以填充容器的宽度和高度，可能会裁剪视频的部分内容。
none：视频将按照其原始大小显示在容器中，可能会导致容器内出现空白。

<style>
    .video-container{
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    .video{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<div class="video-container">
    <video class="video" src="example.mp4" controls></video>
</div>

3、视频宽高比（Aspect Ratio）
视频宽高比属性用于指定视频的宽高比，控制并保持视频的正确比例，避免视频被拉伸或压缩。

<style>
    .video-container{
        width: 500px;
        aspect-ratio: 16/9;
    }
    .video{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
</style>

<div class="video-container">
    <video class="video" src="example.mp4" controls></video>
</div>

在上述示例中创建了一个名为 video-container 的容器，并使用 CSS 的 aspect-ratio 属性将视频的宽高比设置为16/9，视频元素的宽度和高度设置为100%，并使用对象填充属性 object-fit 将其缩放模式设置为 contain，以适应容器的宽度和高度。

4、自定义缩放模式
通过 CSS 或 JavaScript 自定义视频的缩放模式，通过动态修改视频的宽度和高度，实现自定义的缩放效果。

<style>
    .video-container{
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    .video{
        width: 100%;
        height: 100%;
    }
</style>

<script>
    function scaleVideo(scale){
        var video = document.getElementById("myVideo");
        video.style.width = scale * 100 + "%";
        video.style.height = scale * 100 + "%";
    }
</script>

<div class="video-container">
    <video id="myVideo" class="video" src="example.mp4" controls></video>
</div>
<button onclick="scaleVideo(1.5)">放大</button>
<button onclick="scaleVideo(0.5)">缩小</button>
<button onclick="scaleVideo(1)">原始大小</button>

首先创建了一个名为 video-container 的容器，用于包裹视频元素，视频元素的宽度和高度设置为100%，通过 JavaScript 中的 scaleVideo 函数，可以根据传入的缩放比例动态修改视频的宽度和高度，通过点击按钮来触发函数，实现视频的放大、缩小和恢复原始大小的功能。

5、音乐不显示播放器

<audio autoplay="" loop=""> <source src="http://mi.0w0.im/Letter_Song.mp3"></audio>
<bgsound src="音乐保存的绝对路径" autostart=true loop=infinite> 

6、音乐显示播放器

<audio src="music/We Don't Talk Anymore.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto"></audio>

可以使用 CSS 的 display 控制 audio 标签的隐藏和显示：

<style type="text/css">
     audio{
             display: none;
         }
</style>