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

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="js_player" onTimeUpdate="progressUpdate()" width="400" height="300" poster="js_oboi.jpg">
13  <source src="file.mp4" type="video/mp4">
14  <font color="coral">тэг <video> не поддерживается </font>
15  </video>
16  <tr><td>
17  <div class="barContainer">
18    <div id="durationBar">
19      <div id="positionBar"><span id="displayStatus">0</span></div>
20    </div>
21  </div>
22  <tr><td>
23  <div>
24  <button onclick="play()">play</button>
25  <button onclick="pause()">pause</button>
26  <button onclick="stop()">stop</button>
27  <!--button onclick="forPlay()">for</button>
28  <button onclick="resPlay()">res</button-->
29  nbps;nbps;nbps;<font color=white>Label</font>	
30  </div>
                     рис.1
Экран будущего плеера создаёт тэг <video> (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  #positionBar{
30  height: 20px;
31  color: coral;
32  background: #00ffff;
33  text-align: center
34  }
35  #positionBar.span{
36  display: inline-block;
37  margin-top: 5px
38  }
39  #durationBar{
40  border: solid 1px black;
41  width: 400px;
42  margin-top: 0px
43  }
                     рис.2
Создаём JS-обеспечение работы плеера:
  файл player.js
  
01  var video;
02  var display;
03  window.onload = function(){video = document.getElementById("js_player");}
04  function play(){video.play();}
05  function pause(){video.pause();}
06  function stop(){video.pause();video.currentTime = 0;}
07  function forPlay(){video.play();video.playbackRate = 2;}
08  function resPlay(){video.play();video.playbackRate = -2;}
09  function progressUpdate()   
10  {
11    var positionBar = document.getElementById("positionBar");
12    positionBar.style.width = video.currentTime / video.duration * 100 + "%";
13    displayStatus = document.getElementById("displayStatus");
14    displayStatus.innerHTML = Math.round(video.currentTime * 100) / 100 + "сек";
15  }
                       рис.3
Кнопки ускоренного проигрыша (27-28, рис.1) - закомментированы.
Вцелом, выглядеть это будет так:

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