JS и не только

влажность:

давл.:

ветер:

Если интересуешся программированием, то пройти мимо JavaScript & K^o довольно трудно. Тем более, что много функций JS встроено, например, в OS Windows. Грех этим не попользоваться. Например - при создании медиа-проигрывателя.

JS + <video> + CSS

Сразу оговорюсь - и этот, и следующий пример - будут использовать js-библиотеки. При желании их можно скачать по ссылкам.
Текущий пример предполагает поддержку HTML5.
В теле странички создаётся контейнер:

<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.5625">
  <video>
    <source src="file:///f:/vidak/Большой_босс.mp4" type="video/mp4" /> <!--здесь и далее - файл на том-же компе-->
	<br><font color="coral">бро с <video> не дружит</font><br>
  </video>
</div>

или, как вариант:

<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.5625">
  <video src="file:///f:/vidak/Большой_босс.mp4" type="video/mp4" />
	<br><font color="coral">бро с <video> не дружит</font><br>
  </video>
</div>

Внешне это может выглядеть так:

при наличии подключенного файла, стиля и библиотек:

...
<script defer src="js/jquery-1.10.2.min.js"></script> 
<script defer src="js/flowplayer.min.js"></script>
<link rel="stylesheet" href="js/flowplayer.css" media="all" />  
</head>

JS + <div>

Аналогичный проигрыватель можно создать и без использования тега <video>, опираясь только на контейнер <div. Для этого необходимо подключить библиоеку плеера, например, ютьюба и поместить на страничку следующий код:

<div id="playerjs"
     style="padding: 0px; 
            word-spacing: normal; 
            position: relative; 
            box-sizing: content-box !important; 
            text-align: left; 
            user-select: none; 
            font-family: sans-serif; 
            min-height: 15px; 
            font-size: 14px; 
            line-height: 1em; 
            direction: ltr;
            width: auto;		<!--можно указать конкретные размеры-->	
            height: auto">
</div>
<script>
var player = new Playerjs({
id:"playerjs", 
file:"file:///f:/vidak/Выход_дракона.mp4"                                                        
});
</script>

результат будет, примерно, следующий:

Не забываем подключить библиотеку:

...
<script defer src="js/playerjs.js"></script>  
</head>

Этот плеер более независим.
Примeрно то-же, только через jQuery:

<!doctype html> 
<html lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>flw 	   
</head>
<body>
<center>
<h3>Flowplayer через JS</h3>  
<div class="player" data-swf="flowplayer.swf" data-ratio="0.5625"></div> 
<script>
$(document).ready
 (
   function() 
   {
     $(".player").flowplayer
     ({
       swf:"flowplayer/flowplayer.swf",
       playlist:[[{mp4:"media/caplya.mp4"}]]  // если используем playlist - то в нижней части экрана появится точка(-и)
     });
   }
  );
</script>
</center>
</body>
</html>

здесь результат будет, примерно, следующий:

при наличии подключенного файла, стиля и библиотек:

...
<script defer src="js/jquery-1.10.2.min.js"></script> 
<script defer src="js/flowplayer.min.js"></script>
<link rel="stylesheet" href="js/flowplayer.css" media="all" />  
</head>

Сам - плеер

Если вам "не нравится" использовать js-библиотеки - можно написать код самостоятельно, опираясь на поддержку HTML5, DOM и CSS.
Прежде, чем создавать медиа-плеер, необходимо представить, хотя-бы - приблизительно, как он будет выглядеть.
Ну, прежде всего - экран/монитор:

html:
<ldiv class="cont">
 <div id="media" class="media">
  <video id="player" class="player" width="700px" autostart="0" loop="0" preload="metadata"> 
   <source src="file://f:/vidak/aladdin/аладдин.mp4" type="video/mp4" />
   <font color="red">Бро, с <video> , не дружит</font> 
  </video>
  .....

css:
.cont {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: enter;
  align-items: center;    
}
.media{
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;  
}
.player{
  width: 800px;  
}

Под экраном/монитором, у нас будет - контрольная панель, с прогрессом воспроизведения, кнопочками, таймерами и - звуковым слайдером:

html:
  .....
  <div id="control" class="control">
   <div class="prog-bar">
    <progress id="prog" class="element prog" value="0" min="0" title="прогресс воспроизведения"></progress> 
   </div>    
   <div id="play" class="element play" title="игра">
    <svg><path d="M10 8 L10 32 L30 20 Z" fill="#fff" /></svg>
   </div>
   <div id="pause" class="element pause" title="пауза">
    <svg><path d="M10 10 L10 30 L17 30 L17 10 Z M23 10 L23 30 L30 30 L30 10 Z" fill="#fff" /></svg>
   </div>
   <div id="stop" class="element stop" title="стоп">
    <svg><path d="M10 10 L10 30 L30 30 L30 10 Z" fill="#fff" /></svg>
   </div>     
   <time id="elapsed" class="element elapsed" title="текущее время">00:00:00</time>  
   <input id="volume" class="element volume" data-mute="0.5" type="range" value="0.1" max="1" min="0" step="0.01" title="громкость" />
   <time id="duration" class="element duration" title="общее время">00:00:00</time> 
  </div>
  .....

css:
.element{
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}
.control{ 
  right: 0;
  left: 0; 
  bottom: 0;
  position: absolute;          
  transition: all 0.5s ease;   
  border: 1px solid #000;
  background: #363636;  
}
.control.hide{ 
  opacity: 0;
  pointer-events: none;
}
.prog-bar{
  width: 100%;
  border-bottom: 1px solid #000;  
}
.prog{
  width: 99%; 
  height: 6px;  
  margin-left: 3px; 
}
#play,#pause{
  width: 40px;
  height: 40px; 
  float: left;
  border-right: 1px solid #000; 
}
#stop{
  width: 40px;
  height: 40px;
  border-right: 1px solid #000;
} 
#play:active,#pause:active,#stop:active{
  background: #1c1c1c;  
} 
time {
  font-family: Arial;
  font-size: 16px;
  color: #fff;
}

Осталось - оживить это чудо:

// элементы, которые мы используем:

var video = document.getElementById('player'),
    prog = document.getElementById('prog'),
    control = document.getElementById('control'),
    playBtn = document.getElementById('play'),
    pauseBtn = document.getElementById('pause'),
    stopBtn = document.getElementById('stop'),
    elapsed = document.getElementById('elapsed'),
    duration = document.getElementById('duration'), 
    volume = document.getElementById('volume')

// считаем время:

function videoTime(time) 
{ 
  time = Math.floor(time);
   
  var chases = Math.floor(time / 3600),
      minutes = Math.floor((time - chases * 3600) / 60),
      seconds = Math.floor(time - (chases * 3600 + minutes * 60)), 
      chasesVal = chases,
      minutesVal = minutes,
      secondsVal = seconds;
  
  if(chases < 10){chasesVal = "0" + chases;}
  if(minutes < 10){minutesVal = "0" + minutes;}
  if(seconds < 10){secondsVal = "0" + seconds;} 
  return chasesVal + ":" + minutesVal + ":" + secondsVal;
} 
 
// если видео на паузе или закончилось, оно запускается, 
// в остальных случаях - становится на паузу (на дурачка):

function videoPlay() {
    if (video.paused || video.ended) {
        video.play();
    } else {
        video.pause();
    }
}
playBtn.addEventListener('click', videoPlay);

на паузу:

function videoPause() {
    if (video.play) {
        video.pause();
    } else {
        video.play();
    }
}
pauseBtn.addEventListener('click', videoPause);

останавливаем:

function videoStop() 
{
  video.pause();
  video.currentTime = 0;
  prog.value = 0;
}
stopBtn.addEventListener('click', videoStop);

// время начала воспроизведения:

function changeTime(e) 
{ 
  var mouseX = Math.floor(e.pageX - prog.offsetLeft);
  var progress = mouseX/(prog.offsetWidth/100);
  video.currentTime = video.duration * (progress / 100);
}
prog.addEventListener('click', changeTime);
 
// общее время - максимум прогресса:

function initializeVideo() {
  var videoDuration = Math.round(video.duration); 
  prog.setAttribute('max', videoDuration); 
  duration.innerHTML = videoTime(video.duration); 
}
video.addEventListener('loadedmetadata', initializeVideo);

// обновление текущего времени:

function updateTimeElapsed() { 
    elapsed.innerHTML = videoTime(video.currentTime); 
}
video.addEventListener('timeupdate', updateTimeElapsed);

// обновление прогресса:

function updateProgress() { 
    prog.value = Math.floor(video.currentTime); 
}
video.addEventListener('timeupdate', updateProgress);

// обновление громкости:

function updateVolume() {
    if (video.muted) {
        video.muted = false;
    }
    video.volume = volume.value;
}
volume.addEventListener('input', updateVolume);    

// скрытие панели контроля, когда ей не пользуются, если видео на pause, панель должна быть видимой:

function hideControl() {
    if (video.paused) {
        return;
    }
    control.classList.add('hide');
}
control.addEventListener('mouseleave', hideControl);
video.addEventListener('mouseleave', hideControl);

// и показ - когда пользуются:

function showControl() {
    control.classList.remove('hide');
}
control.addEventListener('mouseenter', showControl);
video.addEventListener('mouseenter', showControl);

В результате всех трудов - мы имеем вот это:

00:00:00 00:00:00

Вуаля!
Да, чуть не забыл - в самом низу странички - мы сделаем приписку:

<script type="text/javascript" src="player-svg.js" defer></script>

Часы на JavaScript

Часы будут аналоговые и самые простые. Создаём на страничке контейнер <div id="clok"></div>, где хотите.
Сразу за контейнером вставляем следующий скрипт:

01  <script type="text/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>

Если вы всё сделали правильно, то у вас получится что-то вроде этого, стиль контейнера - на ваше усмотрение.