0

How do you make a player similar to whats vine use using HTML 5 tags

<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>

What i want to do is following

  • Remove control bar
  • Add a volume button like in vine player (on hover)
  • Overlay div on the bottom to show info (on hover)

Example vine player

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

If anyone can give me tip or a tell me place i can get some info on how to do this highly appreciated. Thanks and advance.

4

1 回答 1

1

对于悬停 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 video api 自定义视频标签的视频。他们可能会帮助您解决其他问题。

新波士顿 HTML5 教程

于 2013-07-11T20:42:25.377 回答