Если интересуешся программированием, то пройти мимо JavaScript & Ko довольно трудно. Тем более, что много функций 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>
Внешне это может выглядеть так:
при наличии подключенного файла, стиля и библиотек:
Аналогичный проигрыватель можно создать и без использования тега <video>, опираясь только на контейнер <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
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>
Если вы всё сделали правильно, то у вас получится что-то вроде этого, стиль контейнера - на ваше усмотрение.