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, JS-DOM и CSS3.Прежде, чем создавать медиа-плеер, необходимо представить, хотя-бы - приблизительно, как он будет выглядеть. Представили? Тогда - пишем код:
html:
.....
<div class="cont">
<div class="mobile-cont">
<div class="left-cont">
<video id="player" src="path/to/file.mp4" type="video/mp4"></video>
<span class="play-time" title="время воспроизведения">00:00:00</span>
</div>
<div class="right-cont">
<div class="but-cont">
<div class="01">
<span class="play-but" title="пуск"><svg><path d="M11,9 L22,15 11,21 Z" /></svg></span>
<span class="pause-but" title="пауза"><svg><path d="M10,10 L14,10 14,20 10,20 M16,10 L20,10 20,20 16,20 Z" /></svg></span>
<span class="stop-but" title="стоп"><svg><path d="M10,10 L20,10 20,20 10,20 Z" /></svg></span>
</div>
<div class="02">
<span class="mute-but" title="звук вкл/выкл"><svg><path d="M5,12.5 L7.5,12.5 15,7.5 15,22.5 7.5,17.5 5,17.5 M17.5,12.5 S24,15 17.5,17.5 M17.5,7.5 S32,15 17.5,22.5 L17.5,21.5 S30,16 17.5,8.5 Z" /></svg></span>
<span class="rewd-but" title="-1 минута"><svg><path d="M7.5,15 L15,20 15,10 M15,15 L20,22.5 20,7.5 Z" /></svg></span>
<span class="forw-but" title="+1 минута"><svg><path d="M10,7.5 L15,15 10,22.5 M15,10 L22.5,15 15,20 Z" /></svg></span>
</div>
<div class="03">
<span class="pip-but" title="картинка-в-картинке"><svg><path d="M7.5,7.5 L22.5,7.5 22.5,17.5 7.5,17.5 M17.5,20 L22.5,20 22.5,22.5 17.5,22.5 Z" /></svg></span>
<span class="full-but" title="во весь экран"><svg><path d="M7.5,10 L7.5,22.5 20,22.5 M10,7.5 L22.5,7.5 22.5,20 Z" /></svg></span>
<span id="choise-but" class="choise-but" title="выбор файла"><svg><path d="M10,10 L20,10 20,13 10,13 M10,14 L20,14 20,17 10,17 M10,18 L20,18 20,21 10,21 Z" /></svg></span>
</div>
</div>
<div class="prog-cont">
<span class="progres-bar" title="прогресс воспроизведения"><span class="progres"></span></span>
<span class="tool-tip" title="время выбора">00:00:00</span>
<span class="saund-bar" title="громкость"><span class="saund"></span></span>
</div>
</div>
</div>
</div>
.....
mobile.css:
@charset "UTF-8";
body {
background: #696969;
color: #ffffcc;
}
.cont {
display: flex;
justify-content: center;
align-items: center;
}
.mobile-cont {
position: relative;
width: 770px;
height: 270px;
background: #363636;
margin: 4% auto;
border-radius: 5px;
}
.left-cont {
position: absolute;
left: 0;
width: 480px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
video {
width: 98%;
height: 98%;
border-radius: 5px;
}
.right-cont {
position: absolute;
right: 0;
width: 270px;
height: 100%;
display: flex;
justify-content: flex-start;
}
.but-cont {
display: flex;
align-items: center;
padding: 0px;
}
.01, .02, .03 {
position: relative;
display: flex;
justify-content: center;
width: 100%;
height: 90px;
}
.play-but, .pause-but, .stop-but, .mute-but, .rewd-but,
.forw-but, .pip-but, .full-but, .choise-but {
display: flex;
justify-content: center;
align-items: center;
width: 78px;
height: 78px;
border-radius: 10px;
background: linear-gradient(to bottom, #ccc, #000, #ccc);
margin: 5px;
cursor: pointer;
}
.play-but:active, .pause-but:active, .stop-but:active, .mute-but:active, .rewd-but:active,
.forw-but:active, .pip-but:active, .full-but:active, .choise-but:active {
background: linear-gradient(to bottom, #000, #ccc, #000);
}
.prog-cont {
position: absolute;
width: 10px;
height: 270px;
right: 276px;
}
.tool-tip {
position: absolute;
display: none;
content: "";
left: 200%;
font: 10px Verdana;
padding: 2px;
color: #ссс;
background-color: rgba(0,0,0,0.5);
}
.progres-bar {
position: relative;
width: 100%;
height: 68%;
margin-top: 5px;
display: flex;
align-items: flex-start;
-webkit-transform: rotate(180deg);
background: #696969;
cursor: pointer;
}
.progres {
-webkit-transition: height 0.5s ease;
height: 0;
width: 100%;
background: #cc7600;
}
.progres-bar:hover + .tool-tip {
display: block;
}
.saund-bar {
position: relative;
width: 100%;
height: 27%;
margin-top: 5px;
display: flex;
align-items: flex-start;
-webkit-transform: rotate(180deg);
background: #696969;
cursor: pointer;
}
.saund {
-webkit-transition: height 0.5s ease;
height: 10%;
width: 100%;
background: #cc7600;
}
.play-time {
position: absolute;
top: 2%;
left: 2%;
font: 10px Verdana;
color: #ccc;
transition: 2s ease;
}
svg {
fill: #ccc;
width: 30px;
height: 30px;
}
svg:active {
fill: #ffb90f;
}
Осталось - оживить это чудо:
mobile.js
var lc = document.querySelector('.left-cont'),
vp = document.getElementById('player'),
pl = document.querySelector('.play-but'),
pu = document.querySelector('.pause-but'),
st = document.querySelector('.stop-but'),
mu = document.querySelector('.mute-but'),
rew = document.querySelector('.rewd-but'),
frw = document.querySelector('.forw-but'),
pip = document.querySelector('.pip-but'),
ful = document.querySelector('.full-but'),
ct = document.querySelector('.play-time'),
pb = document.querySelector('.progres-bar'),
pg = document.querySelector('.progres'),
tt = document.querySelector('.tool-tip'),
sb = document.querySelector('.saund-bar'),
sd = document.querySelector('.saund'),
cho = document.getElementById('choise-but');
function setTime(time) {
var h = parseInt(time / 3600), m = parseInt((time % 3600) / 60), s = parseInt((time % 3600) % 60);
if (h < 10) {h = '0' + h} if (m < 10) {m = '0' + m} if (s < 10) {s = '0' + s}
return h + ':' + m + ':' + s;
}
document.addEventListener('DOMContentLoaded', () => {
vp.volume = 0.05;
});
pl.addEventListener('click', () => {
if(vp.paused || vp.ended) {
vp.play();
}
});
vp.addEventListener('click', () => {
if(vp.paused || vp.ended) {
vp.play();
}
});
pu.addEventListener('click', () => {
if(!vp.paused || !vp.ended) {
vp.pause();
}
});
st.addEventListener('click', () => {
vp.pause();
vp.currentTime = 0;
sd.style.height = '10%';
pg.style.height = 0;
});
vp.addEventListener('ended', () => {
vp.currentTime = 0;
sd.style.height = '10%';
pg.style.height = 0;
});
sb.addEventListener('mousedown', (e) => {
var mouseY = e.offsetY,
value = (mouseY * 100) / sb.offsetHeight;
sd.style.height = value + '%';
vp.volume = value / 100;
});
mu.addEventListener('click', () => {
if(vp.muted == false){
vp.muted = true;
mu.innerHTML = '<svg><path d="M10,12.5 L12.5,12.5 20,7.5 20,22.5 12.5,17.5 10,17.5 Z" /></svg>'; // saund-off
}
else{
vp.muted = false;
mu.innerHTML = '<svg><path d="M5,12.5 L7.5,12.5 15,7.5 15,22.5 7.5,17.5 5,17.5 M17.5,12.5 S25,15 17.5,17.5 M17.5,7.5 S33,15 17.5,22.5 L17.5,21.5 S31,16 17.5,8.5 Z" /></svg>'; // saund-on
}
});
vp.addEventListener('timeupdate', () => {
var size = (vp.currentTime * 100) / vp.duration;
pg.style.height = size + '%';
ct.innerHTML = setTime(vp.currentTime);
});
pb.addEventListener('click', (e) => {
var mouseY = e.offsetY;
pg.style.height = (mouseY * 100) / pb.offsetHeight + '%';
vp.currentTime = (vp.duration * mouseY) / pb.offsetHeight;
});
pb.addEventListener('mousemove', (e) => {
var mouseY = e.offsetY;
skt = (vp.duration * mouseY) / pb.offsetHeight;
tt.innerHTML = setTime(skt);
var rt = vp.getBoundingClientRect();
tt.style.top = `${e.pageY - rt.top}px`;
});
lc.addEventListener('mouseleave', () => {
ct.style.opacity = 0;
});
lc.addEventListener('mouseenter', () => {
ct.style.opacity = 1;
});
pip.addEventListener('click', () => {
if (document.pictureInPictureElement) {
document.exitPictureInPicture();
}
else if (document.pictureInPictureEnabled) {
vp.requestPictureInPicture();
}
});
ful.addEventListener('click', () => {
if (document.webkitFullscreenElement){
document.webkitExitFullscreen();
ful.innerHTML = '<svg><path d="M7.5,10 L7.5,22.5 L20,22.5 M10,7.5 L22.5,7.5 L22.5,20 Z"></path></svg>'; // full-on
}
else{
lc.webkitRequestFullscreen();
ful.innerHTML = '<svg><path d="M15,15 L15,5 L25,15 M15,15 L15,25 L5,15 Z"></path></svg>'; // full-off
}
});
cho.addEventListener('click', async () => {
if (window.isSecureContext) {
try {
var [handle] = await window.showOpenFilePicker(),
file = await handle.getFile(),
fileURL = URL.createObjectURL(file),
vp = document.getElementById('player');
vp.src = fileURL;
}
catch {
alert('Данный браузер не знаком с showOpenFilePicker');
}
}
});
В результате всех трудов - мы имеем вот это:
Вуаля!
Да, чуть не забыл - в самом низу странички - мы сделаем приписку:
<script type="text/javascript" src="mobile.js"></script>
Часы на JavaScript
Часы будут цифровые, самые простые и - в оформлении (эстетика, да). За часы будет отвечать следующий скрипт:
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>
Если вы всё сделали правильно, то у вас получится что-то вроде этого, стиль контейнера - на ваше усмотрение.