0

HTML 5タグを使用して、whats vineの使用に似たプレーヤーを作成するにはどうすればよいですか

<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

誰かが私にヒントや場所を教えてくれれば、これを行う方法についての情報を得ることができます。感謝と前進。

4

1 に答える 1

1

ホバー div の場合は、javascript が必要です。div は、CSS を使用してデフォルトで非表示にする必要があります。

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
});

The New Boston には、javascript ビデオ API を使用したビデオ タグのカスタマイズに関する 4 つまたは 5 つのビデオを含む HTML5 チュートリアルがあります。彼らはあなたの他の問題を解決するのに役立つかもしれません.

New Boston HTML5 チュートリアル

于 2013-07-11T20:42:25.377 に答える