78-多媒体技术

多媒体技术

音频

• <audio></audio>
• 属性设置：

属性	值	描述
src	url	要播放的音频的 URL。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。（浏览器大多做了禁止）
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	auto：页面加载后载入整个音频 meta：页面加载后只载入元数据 none：页面加载后不载入音频	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。

• 注意：音频控件默认为不可见，需要添加controls进行显示

• js相关属性和方法

  • paused：获取当前音频暂停状态
  • paly()：播放音频
  • pause()：暂停音频

视频

• <video></video>
• 属性设置：

属性	值	描述
src	url	要播放的音频的 URL。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。（浏览器大多做了禁止）
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	auto：页面加载后载入整个音频 meta：页面加载后只载入元数据 none：页面加载后不载入音频	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
width	数字	视频宽度
height	数字	视频高度
poster	url	设置视频的封面海报

• 注意：视频控件默认为不可见，需要添加controls进行显示

• js相关属性和方法

  • paused：获取当前音频暂停状态
  • currentTime：获取当前视频播放事件
  • paly()：播放音频
  • pause()：暂停音频

• 断点播放：

  // 获取视频标签
  let video = document.querySelector("video")
  
  // 进入网页 进行续播
  // 从本地取出上一次的播放时间
  let time = localStorage.getItem("time")
  // 播放时间进行赋值
  // video.currentTime = Number(time)
  // ~~ 数据转换为数字类型
  video.currentTime = ~~time
  
  // 关闭网页时 执行获取播放时间  unload事件
  window.onunload = function () {   
      //获取视频播放时间  
      let playTime =  video.currentTime  
      //将时间存入本地   
      localStorage.setItem("time",playTime)
  }