Вкратце:
Парсишь, выводишь стандартный video-тег, под ним верстаешь панельку управления с кнопками.
<video poster="">
<source src="" type='video/ogg; codecs="theora, vorbis"'>
<source src="" type='video/webm; codecs="vp8, vorbis"'>
<source src="" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<ul class="controls">
<li>
<a href="#" class="prev"></a>
<a href="#" class="play"></a>
<a href="#" class="pause"></a>
<a href="#" class="stop"></a>
<a href="#" class="next"></a>
</li>
</ul>
Убираешь стандартные контролы у видео
video.controls = false;
и вешаешь на кнопки нужные эвенты.
var video = document.getElementsByTagName("video")[0];
var play = document.getElementsByClassName("play")[0];
var pause = document.getElementsByClassName("pause")[0];
var stop = document.getElementsByClassName("stop")[0];
var prev = document.getElementsByClassName("prev")[0];
var next = document.getElementsByClassName("next")[0];
function pause() {
video.pause();
}
function play() {
video.play();
}
...
play.addEventListener('click', play());
pause.addEventListener('click', pause());
...
Доки:www.w3schools.com/tags/ref_av_dom.asphttps://developer.mozilla.org/en-US/docs/Web/Guide...Пример:https://developer.mozilla.org/en-US/Apps/Fundament...
