html5 video/audio 标签

本文详细介绍了HTML5中的video和audio标签的使用方法,包括支持的格式、浏览器兼容性、常用属性及API事件。从写法、属性到事件监听,全面解析如何在网页中嵌入多媒体资源。

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

html5 video/audio 标签

Video
认识video

支持的常见格式:mp4、webm、ogv

浏览器兼容:

  1. safari 只支持 mp4 格式;
  2. ie9 支持video标签,格式只支持mp4;
<!-- 写法一 -->
<video src="static/video.mp4" controls></video>

<!-- 写法二 -->
<video controls>
  <source src="static/video.mp4">
  <source src="static/video.ogv">
  您的浏览器不支持
</video>
常用属性
  1. width 改变宽度;height 改变高度;width、height 一起使用,大小会改变,但是播放区域会自匹配。
  2. autoplay 自动播放;(在chrome 下单独使用不会自动播放,需要增加muted 静音属性才能自动播放)
  3. loop 自动重新播放;
  4. poster 没播放时,显示的图片;(仅视频刚加载还没播放时有效)
  5. muted 静音;
API 事件
<video src="static/video.mp4" controls id="mVideo"></video>

<script type="text/javascript">
  var video = document.querySelector("#mVideo");
  // 播放
  video.play();
  // 暂停
  video.pause();
  // 总时长durations (需要保证音频加载完成)
  window.console.log(video.durations);
  // 当前播放时currentTime
  video.currentTime = 30;
  window.console.log(video.currentTime);
  // 视频播放资源src
  video.src = "static/video2.mp4";
  // 音量volumn (0-1)
  video.volumn = 0.5;
  // 控件controls
  video.controls = true;
  // 静音muted
  video.muted = true;
  // 当前网络状态networkState 
  // 0 没有初始化 1 找到了资源;2 正在下载资源; 3 没找到资源(一开始加载时也是3 状态)
  window.console.log(video.networkState);
  // 当前可播放资源currentSrc 
  // 1. src 不保证可播放性,currentSrc 保证
  // 2. currentSrc 只有get,没有set
  window.console.log(video.currentSrc);
  // 是否播放结束ended 
  window.console.log(video.ended);
  video.addEventListener('ended', function(){
    // TODO
  });
  // 循环loop
  video.loop = true;
  // 播放速度playbackRate (默认1 表示正常速度)
  video.playbackRate = 2; // 0.5
  // 就绪状态readyState
  // 0 未就绪 1 有数据,但还不足播放 2 数据可用,但是没有下一帧数据 3 数据正在缓冲 4 已经就绪,可以播放
  window.console.log(video.readyState);
  // 监听视频播放的状态timeupdate
  video.addEventListener("timeupdate", function(){
    // TODO
  });
  // 当用户对视频的进度条并且已经完成操作时会触发的事件 seeked
  video.onseeked = function(){ // TODO };
  // 相比seeked 频次更高
  video.onseeking = function(){ // TODO };
  // 当音量更改时volumechange 
  video.onvolumechange = function(){ // TODO };

  // 让video标签变成全屏 requestFullscreen 
  // 根据不同浏览器,调用相应兼容api
  // mozRequestFullScreen, webkitRequestFullscreen
  // 需要在事件中调用
  var someOtherElement = document.querySelector("#someOther");
  someOtherElement.onclick = function(){
    if(video.webkitRequestFullscreen){
      video.webkitRequestFullscreen();
    }
    else if(video.mozRequestFullScreen){
      video.mozRequestFullScreen();
    }
  };

  // 刷新下资源 load
  video.load();
  //canplay 视频已经加载好 可以开始播放了
  video.addEventListener('canplay', function(){
    // TODO
  });

</script>

on 和addEventListener 简单区别:前者会覆盖,后者不会。

Audio
认识audio

支持格式:mp3、wav、ogg

兼容性:

  1. mp3 格式都兼容;
  2. ogg 格式支持:chrome、火狐;不支持safari;
var myAudio = new Audio();
myAudio.src = 'static/audio.wav';
myAudio.play();

说明:类似video。

至此,结束。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值