Комментарий: HTML5 предоставляет новые видеотеги, которые могут напрямую воспроизводить видео без программирования. Вам нужно только написать несколько строк простого кода, чтобы настроить игрока.
Веб -страница html<тело>
<раздел>
<Видео>
<Source src = "videos/vintocure.mp4">
</video>
<av>
<div>
<button type = "button"> Play </button>
</div>
<div>
<div> </div>
</div>
<div> </div>
</nav>
</section>
</body>
Стиль CSS
тело{
Текст-альбом: Центр;
}
Заголовок, раздел, нижний колонтитул, в сторону, навигация, статья, hgroup {
дисплей: блок;
}
#кожа{
Ширина: 700px;
Маржа: 10px Auto;
Заполнение: 5px;
Фон: красный;
Граница: 4px твердый черный;
граница-радий: 20px;
}
Нави
Покрас: 5px 0px;
}
#buttons {
Плавание: осталось;
Ширина: 70px;
Высота: 22px;
}
#defaultbar {
позиция: относительно;
Плавание: осталось;
Ширина: 600px;
Высота: 14px;
Заполнение: 4px;
Граница: 1px твердый черный;
Фон: желтый;
}
/*ProgressBar находится внутри DefaultBar*/
#progressbar {
позиция: абсолютно;
Ширина: 0px; /*Управление изменениями с JavaScript*/
Высота: 14px; /* и Defaultbar - та же высота*/
Фон: синий;
}
код JavaScript
функция dofisrt ()
{
barsize = 600; // Будьте осторожны, чтобы не использовать единицы PX, и не используйте var, это глобальная переменная
mymovie = document.getElementbyId ('mymovie');
playbutton = document.getElementById ('playbutton');
bar = document.getElementById ('defaultBar');
ProgressBar = document.getElementById ('ProgressBar');
playbutton.addeventlistener ('click', playorpause, false); // Третий параметр всегда ложный, зарегистрируйте обработчик событий для фазы пузыря.
bar.addeventlistener ('click', clickedbar, false);
}
// управлять воспроизведением фильма и остановка
функция playorpause () {
if (! mymovie.paused &&! mymovie.edd) {
mymovie.pause ();
playbutton.innerhtml = 'play';
window.clearinterval (updatedBar);
}еще{
mymovie.play ();
playbutton.innerhtml = 'пауза';
updatedBar = setInterval (обновление, 500);
}
}
// управлять динамическим отображением панели прогресса
функция update () {
if (! mymovie.edd) {
var size = parseint (mymovie.currenttime*barsize/mymovie.duration);
progressbar.style.width = size+'px';
}еще{
progressbar.style.width = '0px';
playbutton.innerhtml = 'play';
window.clearinterval (updatedBar);
}
}
// Метод управления панелью прогресса на щелчок мыши
Функция clickedbar (e) {
if (! mymovie.paused &&! mymovie.edd) {
var mousex = e.pagex-bar.offsetleft;
var newtime = mousex*mymovie.duration/barsize; // новое время начала
mymovie.currenttime = newMime;
progressbar.style.width = mousex+'px';
window.clearinterval (updatedBar);
}
}
window.addeventListener ('Load', dofisrt, false);
Хорошо, я взял кодовую часть