img、video、audio

这里我想整理一下 3 个媒体标签，img、video、audio，目前我只用到 img 标签和 video 标签，想把遇到的使用方式在这里记录下来。

一、img

MDN 讲解：：图像嵌入元素

1. 基本用法

scr 属性写图像地址，alt 属性写对图像的描述，width 属性写图片的宽度
一般我们指定 width 和 height 的其中一个，那样另外一个会自适应，这样做图片不会被拉伸

<img src="./dog.png" alt="dog" width="200px">

• 设置属性 src=”./dog.png”，嵌入页面的图片 URL
• 设置属性 alt，在非可视化浏览器、用户选择不显示图像、图像文件无效时，会代替图片进行展示
• 设置属性 width 或 heigth，去指定图片的大小
• 设置属性 loading = “eager” / “lazy” ，让图片立即加载或懒加载
• 设置事件 error，当图片加载出错时触发

2. 常用方法

图像链接：

<a href="xxx">
  <img src="./dog.png" alt="dog">
</a>

图片懒加载

<img src="./dog.png" alt="dog" loading="lazy">

关于 loading 属性的详情，可以看张鑫旭的一篇博客：《浏览器IMG图片原生懒加载loading=”lazy”实践指南》
loading=”lazy” 的懒加载方式由浏览器自主控制，在 caniuse 网站可以查询到 loading 属性在不同浏览器的支持度，这个属性算是蛮新的

• Chrome：2019 年 9 月 10 日
• Edge：2020 年 1 月 15 日
• Firefox：2020 年 4 月 8 日

let isSupportLoading = 'loading' in document.createElement('img');
if (isSupportLoading){
    // ...
}

二、video

MDN 讲解：

1. 基本用法

src 属性写视频地址，controls 显示视频控件，width 写视频宽度
一般 width 和 height 指定其中一个
在浏览器不支持该元素时，会显示 <video></video> 标签之间的内容作为回退

<video src="./dog.mp4" controls width="400px">不支持</video>

• 设置属性 src=”./dog.mp4”，嵌入页面的视频 URL
• 设置属性 controls，展示默认播放控件
• 设置属性 width 或 height，指定视频的大小
• 设置属性 autoplay，让视频自动播放
• 设置属性 loop，让视频结尾的地方自动返回视频开始的地方
• 设置属性 muted，让应聘初始化为静音
• 设置属性 poster=’./dog.png’，在用户播放前展示的内容
• 设置事件 ended，视频结束时触发
• 设置属性 preload=”none”/“metadata”/“auto”，告诉浏览器最佳的用户体验方式

2. 常用方法

静音循环自动播放

<video src="./dog.mp4" autoplay loop muted></video>

浏览器不支持此元素时候的降级处理

<video src="./dog.mp4" autoplay>
  抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a>
  并用你喜欢的播放器观看!
</video>

3. 自定义控件

当设置 controls 时，视频会展示浏览器自带的控件，查看默认控件样式的方法，可以参看一篇博客：
《修改video标签自带按钮的默认样式》

当没有设置 controls 时，那么视频不会展示浏览器自带的控件，我们可以创建自己的控件，详见：
《Creating a cross-browser video player》

Most browser’s default video controls have the following functionality:

• Play/pause
• Mute
• Volume control
• Progress bar
• Skip ahead
• Go fullscreen

参看一个控件的 HTML 格式

<ul id="video-controls" class="controls">
   <li><button id="playpause" type="button">Play/Pause</button></li>
   <li><button id="stop" type="button">Stop</button></li>
   <li class="progress">
      <progress id="progress" value="0" min="0">
         <span id="progress-bar"></span>
      </progress>
   </li>
   <li><button id="mute" type="button">Mute/Unmute</button></li>
   <li><button id="volinc" type="button">Vol+</button></li>
   <li><button id="voldec" type="button">Vol-</button></li>
   <li><button id="fs" type="button">Fullscreen</button></li>
</ul>

判断浏览器是否支持自定义控件

var supportsVideo = !!document.createElement('video').canPlayType
if(supportsVideo){
    // ...
}

Play/Pause

playpause.addEventListener('click', function(e) {
   if (video.paused || video.ended) video.play();
   else video.pause();
});

Stop

stop.addEventListener('click', function(e) {
   video.pause();
   video.currentTime = 0;
   progress.value = 0;
});

Mute

mute.addEventListener('click', function(e) {
   video.muted = !video.muted;
});

Volume

volinc.addEventListener('click', function(e) {
   alterVolume('+');
});
voldec.addEventListener('click', function(e) {
   alterVolume('-');
});
// video.volumn 的范围是 0~1 双精度值
var alterVolume = function(dir) {
   var currentVolume = Math.floor(video.volume * 10) / 10;
   if (dir === '+') {
      if (currentVolume < 1) video.volume += 0.1;
   }
   else if (dir === '-') {
      if (currentVolume > 0) video.volume -= 0.1;
   }
}

Progress**

video.addEventListener('loadedmetadata', function() {
   progress.setAttribute('max', video.duration);
});
video.addEventListener('timeupdate', function() {
   progress.value = video.currentTime;
   progressBar.style.width = Math.floor((video.currentTime / video.duration) * 100) + '%';
});

// loadedmetadata 事件触发后，有些浏览器可以读不到 video.duration
// 新增以下代码可以修复 loadedmetadata 事件未读取到 video.duration 的 bug，在 timeupdate 事件后读取
video.addEventListener('timeupdate', function() {
   if (!progress.getAttribute('max')) progress.setAttribute('max', video.duration);
   progress.value = video.currentTime;
   progressBar.style.width = Math.floor((video.currentTime / video.duration) * 100) + '%';
});

Skip Ahead

progress.addEventListener('click', function(e) {
   var pos = (e.pageX  - this.offsetLeft) / this.offsetWidth;
   video.currentTime = pos * video.duration;
});

Fullscreen

var fullScreenEnabled = !!(document.fullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled || document.webkitSupportsFullscreen || document.webkitFullscreenEnabled || document.createElement('video').webkitRequestFullScreen);
if (!fullScreenEnabled) {
   fullscreen.style.display = 'none';
}

fullscreen.addEventListener('click', function(e) {
   handleFullscreen();
});
var handleFullscreen = function() {
   if (isFullScreen()) {
      if (document.exitFullscreen) document.exitFullscreen();
      else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
      else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen();
      else if (document.msExitFullscreen) document.msExitFullscreen();
      setFullscreenData(false);
   }
   else {
      if (videoContainer.requestFullscreen) videoContainer.requestFullscreen();
      else if (videoContainer.mozRequestFullScreen) videoContainer.mozRequestFullScreen();
      else if (videoContainer.webkitRequestFullScreen) videoContainer.webkitRequestFullScreen();
      else if (videoContainer.msRequestFullscreen) videoContainer.msRequestFullscreen();
      setFullscreenData(true);
   }
}
var isFullScreen = function() {
   return !!(document.fullscreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
}

设置点击全屏后的一些提示

var setFullscreenData = function(state) {
   videoContainer.setAttribute('data-fullscreen', !!state);
}

三、audio

MDN 讲解：

1. 基本用法

src 属性写音频地址，controls 展示音频控件
在浏览器不支持该元素时，会显示 <audio></audio> 标签之间的内容作为回退

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

• 设置属性 src=”./dog.mp3”，嵌入页面的音频 URL
• 设置属性 autoplay，让音频自动播放
• 设置属性 loop，让音频循环播放
• 设置属性 muted，让音频静音
• 设置属性 preload=”none”/“metadata”/“auto”，告诉浏览器最佳的用户体验方式

2. 常用方法

一篇关于使用 HTML <audio> 的文章：《视频和音频内容》

「@浪里淘沙的小法师」