视频海报能否添加alt属性？

Question

视频海报能否添加alt属性？

10

在HTML5中，我可以为作为海报使用的图像添加alt信息吗？

 <video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

- Ege

如果您想为无法播放视频的设备提供描述性内容，则应将其放置在当前显示“您的浏览器不支持视频标记”的位置（这只是旧式愚蠢的“您的浏览器不支持框架”的类比，它从未有任何意义）。 - CBroe

3个回答

2

我们对Coverr.co的视频也有同样的问题——虽然这些视频没有声音，但我们想要一种描述视频的方式，以便视觉障碍用户或使用旧浏览器（不支持html 5 <video>标签）的用户使用。使视频可访问的一个很好的额外好处是，您可以获得额外的SEO提升，因为谷歌无法爬取视频，但绝对可以爬取我们在HTML中添加的附加可访问文本。

底线/TLDR - 尽管alt属性已经存在并广泛用于图像，但似乎没有相应的原生属性适用于视频。如果您感兴趣，可以看看此处的原因，但我认为这个原因不足以错过为那些否则无法观看视频的人们提供简单标记的所有好处。

我们有什么？

翻译： Transcript - 视频中“正在发生的事情”的描述。没有本地支持，但有一些建议如何将其集成到HTML中。其中一个看起来简单有效的建议（摘自here）：

function showTranscript() {
  var x = document.getElementById('transcript');
  // var toggle = document.getElementById('trans_toggle');
  if (x.style.display === "none" || !x.style.display) {
    x.style.display = "block";
    this.text = "hide transcript"
  } else {
    x.style.display = "none";
    this.text = "see transcript"
  }
}

document.addEventListener("DOMContentLoaded", function(event) {
  var toggle = document.getElementById('trans_toggle');
  toggle.onclick = function() {
    showTranscript();
  };
});

#transcript {
  display: none;
}

<h2 id="title">Title of my video</h2> (<a href="#transcript" onclick="showTranscript()" id="trans_toggle">see transcript</a>)
<video src="foo.ogv" aria-labelledby="title" aria-describedby="transcript">
    <track kind="captions" label="English captions" src="captions.vtt" srclang="en" default></track>
  </video>
<div id="transcript">
  <strong>Transcript of the video:</strong> Transcript here
</div>

another option is using the aria attributes, and while valid and even recommended, this approach is not supported as much.

英译中：

字幕 - 如果我理解正确，集成字幕的正确方式是使用<track> 标签。根据媒体无障碍检查清单，什么是字幕？

字幕不应与字幕混淆 - 它们相似但又有所不同。虽然字幕是视频对话的直接翻译，通常是用不同的语言，但字幕不仅具有口头文字的文本描述，还包括背景音乐或声音的描述，以提供与听音频获得的同样信息水平。

字幕 - 视频对话的直接翻译。我们在Coverr中不需要它，因为我们所有的库存视频都没有声音，但这当然是一种非常有效的方式，让听力受损的用户（以及85%的FB用户，他们在滚动其Feed时从不打开声音）“聆听”您的视频。可以嵌入到视频本身中，或者作为VTT文件添加并由支持的播放器显示。
备用文本（不适用于辅助功能，但将帮助使用旧浏览器的用户）。

有用的链接：

我知道这不是您通常可以得到的明确答案，但网络视频可访问性的当前状态需要尽可能多的支持。非常欢迎任何评论或改进建议，因为对我们而言，这仍然是一个未解决的问题，应该尽快演变成标准解决方案。

- Nuriel

0

你可以使用 title 属性。

<video title="Video of Poster" width="320" height="240" controls>
  <source src="/media/movie.mp4" type="video/mp4">
</video>

- Dinoop V P

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- v010dya · Accepted Answer

仅仅因为它是一张图片并不意味着它会像<img>标签一样行为。实际上，在这种情况下，它甚至不是一个标签，也没有办法这样做。

将<img>嵌套在<video>中将不会产生期望的效果，因为浏览器只有在完全不知道<video>标签时才会解释它（即旧浏览器），而这并不是你所追求的人群。

你在这里想要做什么？

如果您正在添加alt以实现某种搜索引擎优化，则只应在搜索引擎实际上将其识别为要索引和识别相关图像的合法文本时才这样做。在这种情况下，很可能最好在<video>内添加<img>，如下所示：

<video poster='image.png'>
  <source .../>
  <img src='image.png' alt='Image showing a cute cat' />
  Unfortunately your browser is too old.
</video>

如果你是想让屏幕阅读器能够理解显示的内容，那么你就会面临更大的麻烦。因为它们通常比大多数搜索引擎更聪明，并且经常读取光标下的文本。上述方法将不起作用，因为 <img> 标记根本不会被显示出来。我对屏幕阅读器了解不够，无法再提供更多帮助。