ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ЯНВАРЬ >>>

HTML ↴

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Видеоплеер HTML5  [mp4 ogv webm] Вариант LineSkinPlay</title>
<link href="https://www.03www.ru/2013-01/video/dvs/dvs_common_style.css" type="text/css" rel="stylesheet" />
<script src="https://www.03www.ru/2013-01/video/dvs/ClassicSkinPlay.js" type="text/javascript"></script>
<script src="https://www.03www.ru/2013-01/video/dvs/ClassicNeoSkinPlay.js" type="text/javascript"></script>
<script src="https://www.03www.ru/2013-01/video/dvs/LineSkinPlay.js" type="text/javascript"></script>
<script src="https://www.03www.ru/2013-01/video/dvs/LineSimpleSkinPlay.js" type="text/javascript"></script> 
<script src="https://www.03www.ru/2013-01/video/dvs/DragObject.js" type="text/javascript"></script>
<script src="https://www.03www.ru/2013-01/video/dvs/dragMaster.js" type="text/javascript"></script>
<script src="https://www.03www.ru/2013-01/video/dvs/helpers.js" type="text/javascript"></script>
<script src="https://www.03www.ru/2013-01/video/dvs/dvsplayer.js" type="text/javascript"></script>
<script  type="text/javascript">
function dvsplay_settings(){this.width=600,this.height=400,
this.backgroundColor="#000", //////Цвет заливки плеера

this.controlBackgroundColor="#000", ///////Цвет заливки панели управления

this.displayMuteButton=true, ///////Показать/скрыть кнопку "Режим без звука"
///// true - отобразить

this.displayPlayPauseButton=true, /////// Показать/скрыть кнопку "Воспроизведение/Пауза" 
///// true или !0- отобразить

this.displayAutoPlayButton=true, ///////  Показать/скрыть кнопку "Автозапуск"
////// true  или !0 - отобразить

this.displayFullScreenModeButton=true, /////// Показать/скрыть кнопку "Полноэкранный режим"

this.displayVolumeControl=true, ///////Показать/скрыть кнопку регулирования громкости
////// true  или !0- отобразить

this.displayTrackBar=true, /////// Показать/скрыть полосу прокрутки
////// true  или !0- отобразить

this.displayVolumeDigital=!0, /////// Показать/скрыть цифры регулирования громкости
//// true  или !0- отобразить

this.displayVideoLengthDigitals=!0, /////// Показать/скрыть цифры, отображающие продолжительность видео 
///// true  или !0- отобразить

this.startVolume=.5, /////// Исходный уровень громкости
///////  0 (без звука) до 1 (максимальная громкость)

this.startPosition=0, /////// Начальная точка воспроизведения видео
///////от 0 до 1

this.muteButtonAtStart=!0, /////// Состояние кнопки "Режим без звука" при запуске
/////true  или !0- без звука

this.autoRewind=!1, /////// Автоматическая перемотка назад
/////////true  или !0- воспроизведение снова начинается после окончания видео
////////false или !1 - воспроизведение останавливается в конце видео

this.autoPlay=!1, /////// Функция автозапуска true/false 
/////////true  или !0- воспроизведение начинается автоматически после загрузки страницы, 
////////false  или !1- воспроизведение начинается после нажатия кнопки Воспроизведение)

this.autoSize=!0 ///////
}
</script> 
</head>
<body>
<h1>Вариант LineSkinPlay</h1>
<div id="dvsPlayer">
<video>
<source src="video7/06.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video7/06.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<script type="text/javascript">
var dvsPlayer = new DVS_html5player();
var skin = new LineSkinPlay();
var sett = new dvsplay_settings();
//Здесь вы можете изменить настройки, заданные в файле dvs_settings.js
dvsPlayer.Skin = skin;
dvsPlayer.settings=sett;
dvsPlayer.VideoTitle="Название видео";
dvsPlayer.Init('dvsPlayer');
</script>

<div style="margin-left:380px;">
<input type="radio" value="0" id="Classic" onclick="SetClassicPlayerTheme()"/>Classic<br/>
<input type="radio" value="0" id="ClassicNeo"  onclick="SetClassicNeoPlayerTheme()"/>Classic Neo<br/>
<input type="radio" value="0" id="Line"  onclick="SetLineSkinPlayPlayerTheme()"/>Line<br/>
<input type="radio" value="0" id="LineSimple"  onclick="SetLineSimpleSkinPlayPlayerTheme()"/>Line Simple<br/>
</div>

function SetClassicNeoPlayerTheme() {
       ClearPlayer();
       InitPlayer( new ClassicNeoSkinPlay());
       document.getElementById('ClassicNeo').checked=true;
   }

function SetLineSkinPlayPlayerTheme() {
       ClearPlayer();
       InitPlayer( new LineSkinPlay());
       document.getElementById('Line').checked=true;
   }

function SetLineSimpleSkinPlayPlayerTheme() {
       ClearPlayer();
       InitPlayer( new LineSimpleSkinPlay());
       document.getElementById('LineSimple').checked=true;
   }

function ClearPlayer()   {
       dvsPlayer.dvs_play_conteiner.innerHTML = "";
       dvsPlayer.dvs_play_conteiner.appendChild(dvsPlayer.dvsplayer);
       document.getElementById('Classic').checked=false;
       document.getElementById('ClassicNeo').checked=false;
       document.getElementById('Line').checked=false;
       document.getElementById('LineSimple').checked=false;
   }

function InitPlayer(skin,obj)
   {
        var sett = new dvsplay_settings();
        sett.width = 320;
        sett.height = 271;

dvsPlayer.Skin = skin;
        dvsPlayer.settings = sett;
        dvsPlayer.VideoTitle = "Название видео";
        dvsPlayer.Init('dvsPlayer');
   }

</script>
<p><a href="dvs.zip" style="font-size:120%" download="скачать архив">Требуются скрипты и фото</a> </p>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне