Код магнитолы

JS - телефон

Оппозиция в России ?

Россия и Украина

Мысли в слух...

Российская...власть ?

ТВ - страничка

Создаём сайт

Любимые сериалы



На главную

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
Если вы всё сделали правильно, то у вас получится что-то вроде этого:
Стиль контейнера - на ваше усмотрение.