Question

我想要在浏览器中播放这个funcation test (test) if test1 results1 Matrix(i_row)=results1 save ('test.mat','Matrix') elseif test2 results2 Matrix(i_row)=results2 save ('test.mat','Matrix') elseif test3 results3 Matrix(i_row)=results3 save ('test.mat','Matrix') end end audio。当我点击时，mp3有一个附带的图像和一个导航到的URL。所以我将mp3放在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>加入海报？

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

Answer 1

为视频标记应用css cursor: pointer属性。对于处理click事件，请附加click事件处理程序。我认为在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>

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

1 个答案: