如何使海报表现得像 html 视频中的超链接答案

【问题标题】：How to make poster behave like a hyperlink in html video如何使海报表现得像 html 视频中的超链接
【发布时间】：2016-12-17 23:37:00
【问题描述】：

我有这个 audio mp3 我想在浏览器中播放。 mp3 有一个附带的图像和一个 URL，当我点击时可以导航到。所以我把mp3放在video标签里，把图片做成这样的海报

//cache the poster
var img = document.createElement("img");
img.src = "http://lorempixel.com/300/200";
// to make sure the poster is loaded before the video player appears
img.addEventListener("load", function(){
	var video = document.getElementById("demo-player");
  video.style.display = 'block';
	console.log("loaded!");
});
delete img;

<video id="demo-player" controls="controls" style="display: none;"
    src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2003.mp3"
    poster="http://lorempixel.com/300/200">
</video>

现在我想通过在视频标签上创建一个点击事件侦听器来使海报可点击。我的问题是

覆盖视频的点击事件以使海报可点击是否正确？（还有其他方法吗？）
有什么方法可以将cursor: pointer 带到海报中？

P.S：我在这里使用视频标签是因为，我的音频将是带有图像和导航链接的广告/公告（如果有兴趣）。在这 4-5 秒的前贴片音频之后，会有一段很长的内容视频。

【问题讨论】：

标签： html html5-video

【解决方案1】：

为视频标签应用 css cursor: pointer 属性。为了处理点击事件附加一个点击事件处理程序。我认为在video tag 上使用不会影响视频控制器的点击事件处理程序没有任何问题。

//cache the poster
var img = document.createElement("img");
img.src = "http://lorempixel.com/300/200";
// to make sure the poster is loaded before the video player appears
img.addEventListener("load", function() {
  var video = document.getElementById("demo-player");
  video.style.display = 'block';
  console.log("loaded!");
  video.addEventListener('click', function() {
    console.log('clicked');
  });
});
delete img;

video {
  cursor: pointer;
}

<video id="demo-player" controls="controls" style="display: none;" src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2003.mp3" poster="http://lorempixel.com/300/200">
</video>

【讨论】：