JS - плеер
Трудно было удержатся и не создать ещё один плеер - на JavaScript. Тем более, что он относительно несложный: JS + HTML5.Создавать плеер будем по всем правилам - с использованием файла player.js. Начнём с внешнего вида:
файл js_player.html
01 <!DOCTYPE html>
02 <html xml:lang="ru" lang="ru">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
05 <title>js_player</title>
06 <script type="text/javascript" src="player.js"> </script>
07 <link href ="style.css" rel="stylesheet" type="text/css">
08 <body>
09 <center><h4>JS-HTML5 player</h4>
10 <table border=2 bgcolor=black>
11 <tr><td>
12 <video id="player" onTimeUpdate="timeSee()" width="400" height="300" poster="file.jpg">
13 <source src="file.mp4" type='video/mp4 codecs="avc1.42E01E, mp4a.40.2"'>
14 <font color="coral">тэг <video> не поддерживается </font>
15 </video>
16 <tr><td>
17 <div id="fullTime">
18 <div id="gameTime"><span>0</span></div>
19 </div>
20 <tr><td>
21 <div>
22 <button onclick="play()">просмотр</button>
23 <button onclick="pause()">пауза</button>
24 <button onclick="stop()">стоп</button>
25 <!--button onclick="forPlay()">вперёд</button>
26 <button onclick="resPlay()">назад</button-->
27 nbps;nbps;nbps;<font color=white>Label</font>
28 </div>
рис.1
Экран будущего плеера создаёт тэг <video> (12, рис.1). Именно в него подключена функция
контроля за воспроизведением (12, рис.1), обеспечивающая работу индикатора. Если этот тэг не
поддерживается - экрана, а значит и плеера - не будет (14, рис.1).Стильно оформляем:
файл stile.css
01 body{
02 margin:25px;
03 font-family:consolas;
04 font-size:16px
05 }
06 b,strong{
07 color:#000080;
08 font-family:georgia;
09 font-size:15px
10 }
11 h2,h3,h4{
12 color:blue;
13 font-family:georgia
14 }
15 pre,code{
16 font-size:16px;
17 font-family:consolas;
18 height:auto;
19 width:auto;
20 color:#000080;
21 background-color:#ffffcc;
22 border:solid 0px
23 }
24 i,em{
25 color:coral;
26 font-family:georgia;
27 font-size:15px
28 }
29 #fullTime{
30 height:20px;
31 width:472px
32 }
30 #gameTime{
33 color:#cd5c5c;
34 background:#ffd700;
35 text-align:center
36 }
37 #gameTime.span{
38 display:inline-block
39 }
рис.2
Создаём JS-обеспечение работы плеера:
файл player.js
01 var video;
02 window.onload = function(){video = document.getElementById("player");}
03 function play(){video.play();}
04 function pause(){video.pause();}
05 function stop(){video.pause();video.currentTime = 0;}
06 function forPlay(){video.play();video.playbackRate = 2;}
07 function resPlay(){video.play();video.playbackRate = -2;}
08 function timeSee()
09 {
10 var fullTime = document.getElementById("fullTime");
11 fullTime.style.width = video.currentTime / video.duration * 100 + "%";
12 var gameTime = document.getElementById("gameTime");
13 gameTime.innerHTML = Math.round(video.currentTime * 100) / 100 + "сек";
14 }
рис.3
Кнопки ускоренного проигрыша (27-28, рис.1) - закомментированы.Вцелом, выглядеть это будет так:
|
0
|
| &nbps;&nbps;Label |
Для активизации плеера необходимо добавить в строку (13, рис.1) адрес медиафайла.
Вместо Label можно вставить часики:
cоздаём контейнер <div id="clok"></div>,подключаем запуск хронометра <body onLoad="startclock();"> и в голову, до тэга </head>, вставляем следующий код:
01 <script language="javascript">
02 var timerID = null;
03 var timerRunning = false;
04 function stopclock ()
05 {
06 if(timerRunning) clearTimeout (timerID);
07 timerRunning=false;
08 }
09 function startclock() // создаём изображение
10 {
11 stopclock();
12 showtime();
13 }
14 function showtime()
15 {
16 timerID = setTimeout("startclock()",1000); // обновляем изображение каждые 1000 миллисекунд
17 timerRunning = true;
18 var now = new Date(); // задаём внешний вид...
19 var timer = now.getHours()+":"+now.getMinutes()+":"+now.getSeconds(); //...таймера и указываем..
20 document.getElementById("clok").innerText = timer.toLocaleString(); //...его место
21 }
22 </script>
рис.4
Если вы всё сделали правильно, то у вас получится что-то вроде этого: