音频

要在HTML中嵌入音频，你可以使用<audio>元素。以下是一个简单的例子：

<audio src="audio.mp3" controls></audio>

在这个例子中，src属性指定音频文件的路径，controls属性会在浏览器中显示音频控件，包括播放/暂停按钮、音量调节和进度条。

你还可以使用autoplay属性来自动播放音频，但是不会显示音频控件：

<audio src="audio.mp3" autoplay></audio>

通过设置loop属性，可以使音频循环播放：

<audio src="audio.mp3" loop></audio>

你还可以通过JavaScript来控制音频的播放和暂停。例如，使用以下代码：

<audio id="myAudio" src="audio.mp3"></audio>

<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>

<script>
  var audio = document.getElementById("myAudio");

  function playAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }
</script>

这是一个基本的例子，你可以根据需要进行扩展和修改。

音频的禁用下载和右键菜单

controlsList="nodownload" oncontextmenu="return false"

通过js控制音量

<script type="text/javascript">
  //通过js设置音频控件音量
  var audio = document.querySelector('audio');
  audio.volume = 0.5; // 设置音量为50%
</script>

动态改变音频文件

function changeAudio(url) {
  var audio = document.getElementById('myAudio');
  var source = audio.getElementsByTagName('source')[0];
  
  source.src = url;
  audio.load(); // 重新加载音频源
  audio.play(); // 播放音频
}

视频

html通过video标签嵌入视频，autoplay说明自动播放

    <video src="./ss.mp4" controls autoplay>
        浏览器不支持播放视频
    </video>

如果想禁用下载和右键菜单，视频标签加入以下属性

controlsList="nodownload" oncontextmenu="return false"

如果想要让视频大小适应屏幕，加入下面的属性

width="100%" height="100%"

使用js动态改变视频

    <!--视频标签-->
    <video id="videoplayer" controls>
            <source id="videosource">
            浏览器不支持播放视频
    </video>
    <script>
        <!--设置视频内容-->
        const videosource = document.getElementById('videosource');
        videosource.src = "./ss.mp4";
    </script>

通过css属性可以让视频标签在页面居中

    video{ 
        /*让视频居中*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

html嵌入音频和视频

音频

视频