Question

如何使用HTML 5标签制作类似于使用藤蔓的播放器

<video width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
  <source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

我想做的是关注

删除控制栏
像藤蔓播放器一样添加音量按钮（悬停时）
在底部叠加div以显示信息（悬停时）

示例藤蔓播放器

https://vine.co/v/h7tUrqaWuTB/embed

如果有人可以给我小费或告诉我的地方，我可以得到一些关于如何做到这一点高度赞赏的信息。谢谢并提前。

Answer 1

对于on hover div，你需要javascript。默认情况下，应使用CSS隐藏div。

var divToShow = document.getElementById('divToShow');
var video = document.querySelector('video'); //gets the video element
video.addEventListener('mouseover', function(element) {
    divToShow.style.display = 'block'; //show the div (block could be replaced with any of the display options)
});
video.addEventListener('mouseout', function(element) {
    divToShow.style.display = 'none'; //hide the div
});

New Boston有一个HTML5教程，其中包含使用javascript视频api进行视频标签自定义的四到五个视频。他们可能会帮助您处理其他问题。

The New Boston HTML5 Tutorial

葡萄藤喜欢播放器与HTML 5

1 个答案: