页面插入视频音频

最新推荐文章于 2024-08-28 21:57:26 发布

IT萌新@

最新推荐文章于 2024-08-28 21:57:26 发布

阅读量59

点赞数

文章标签：音视频 html5

本文链接：https://blog.csdn.net/m0_49102053/article/details/129766679

版权

文章探讨了HTML5中<audio>和<video>标签的使用，特别是关于自动播放的限制，由于浏览器的防骚扰机制，不允许未静音的标签自动播放。为解决这个问题，示例中展示了如何通过JavaScript来控制音频的播放、暂停和重置。此外，还提到了<object>和<embed>插件以及<video>标签插入视频的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，音频标签

<audio><audio>标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j3QOhms8-1679725484900)(C:\Users\86187\AppData\Roaming\Typora\typora-user-images\image-20230325103356882.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-89r3Gfnc-1679725484900)(C:\Users\86187\AppData\Roaming\Typora\typora-user-images\image-20230325104130615.png)]

自动播放属性不生效，这其实是浏览器的防骚扰机制：只有在用户至少与页面交互过一次的情况下，浏览器才允许页面放出声音,chrome 66以上的版本为了避免多媒体标签产生随机噪音，规定了不为静音的标签不能自动播放，需手动触发开始播放，标签定义为静音才可以自动播放。

二，视频标签

<video></video>视频标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nIIHeSG8-1679725484901)(C:\Users\86187\AppData\Roaming\Typora\typora-user-images\image-20230325104044389.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JrBdiXPz-1679725484901)(C:\Users\86187\AppData\Roaming\Typora\typora-user-images\image-20230325104117195.png)]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>视频音频</title>
<!--  使用js添加控制播放控件-->
      <audio src="../video/BEYOND - 海阔天空.mp3" id="dd" autoplay="autoplay" muted="muted" controls="controls" loop="true"></audio><br>
      <button onclick="dt()">停止播放</button>
      <button onclick="st()">开始播放</button>
      <button onclick="rs()">重置播放</button>

      <script type="text/javascript">
          function dt(){
              var dd = document.getElementById("dd")
              dd.pause()
          }
          function st(){
              var dd = document.getElementById("dd")
              dd.play()
          }
          function rs(){
              var dd = document.getElementById("dd")
              dd.load()
          }
      </script>
</head>
<body>

<!--使用audio标签-->
<div style="margin-top: 50px">
  <audio   controls="controls" loop="false" autoplay="autoplay" >
  <source src="../video/BEYOND - 海阔天空.mp3" type="audio/mp3"/>
</audio>
</div>


使用object插件

<object  autoplay="autoplay"   data="../video/BEYOND - 海阔天空.mp3"></object>

使用embed插件

  <embed  src="../video/BEYOND - 海阔天空.mp3" autoplay="autoplay" />

<a href="Video_Audio.html">音乐</a>

<a href="../video/BEYOND - 海阔天空.mp3">使用超链接</a>

<a href="../video/BEYOND - 海阔天空.mp3">使用雅虎的媒体播放器</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
使用video标签插入视频
<video controls="controls" width="200px" height="200px" autoplay="autoplay" muted="muted" src="../video/BEYOND-光辉岁月(超清).mp4" >video2</video><br>
<video controls="controls"  autoplay="autoplay" muted="muted" src="../video/BEYOND - 不再犹豫.mp3" >video2</video>

</body>
</html>