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:

<!doctype html>
<html lang="ru-RU">
<head>
<meta charset="windows-1251" />
<title>js-player</title> 
<link href ="style.css" rel="stylesheet" type="text/css" media="all" />  <--стиль странички-->
<body>
<style>     <--стиль плеера-->
.cont{
  width: 640px;
  hight: 360px;
  background: #000000;
  border: 2px solid black
}  
.controlPanel{
  cursor:pointer;
  display:inline-block;
  vertical-align:middle 
}
.progress{
  height: 10px;
  width: 100%;
  border-radius: 100px 100px 100px 100px;  
  background: yellow  
} 
.currTime{                       
  font-size: 24px;
  color: #ffffff
}
.durTime{
  font-size: 18px;
  color: gray
}
</style>
<h4>JS-HTML5 player</h4>
<div class="cont"> 
  <video id="media" class="media" src="file:///f:/vidak/Путь_дракона.mp4" onTimeUpdate="timeSee()"> 
    <font color="coral">тэг <video> не поддерживается</font>
  </video>
  <div id="progress" class="media progress"></div>  
  <div class="controlPanel">    
    <button onclick="play()">игра</button>
    <button onclick="pause()">пауза</button>  
    <div id="currTime" class="controlPanel currTime" title="Текущее время">00:00:00</div> 
    <div id="durTime" class="controlPanel durTime" title="Общее время">00:00:00</div> 	
  </div> 
</div>

Сразу за этим кодом помещаем скрипт:

<script>   
var video; 
window.onload = function(){video = document.getElementById("media");}
function play(){video.play();}
function pause(){video.pause();}  
function timeSee()                                 // функция возвращает время в заданном формате
{
  var progress = document.getElementById("progress");
  progress.style.width = video.currentTime/video.duration * 100 + "%";
  var currTime = document.getElementById("currTime");
  currTime.innerHTML = videoTime(video.currentTime);   
  var durTime =  document.getElementById("durTime");
  durTime.innerHTML = videoTime(video.duration);
}
function videoTime(time) 
{ 
  time = Math.floor(time);   
  var chas = Math.floor(time / 3600);
  var minutes = Math.floor((time - chas * 3600) / 60);
  var seconds = Math.floor(time - (chas * 3600 + minutes * 60)); 
  var chasVal = chas;
  var minutesVal = minutes;
  var secondsVal = seconds; 
  if(chas < 10){chasVal = '0' + chas;}
  if(minutes < 10){minutesVal = '0' + minutes;}
  if(seconds < 10){secondsVal = '0' + seconds;} 
  return chasVal + ':' + minutesVal + ':' + secondsVal;
</script>

В результате будем иметь что-то подобное:

00:00:00

Часы на 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>

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