Редакция:	03.04.2024
Теги:	JQuery

Видео

HTML

</video>

</div>

</svg>

</div>

</div>

CSS

.player {

position: relative;

overflow: hidden;

}

.player_frame {

min-height: 100%;

position: relative;

padding-bottom: 56.25%;

overflow: hidden;

}

.player_frame video {

position: absolute;

top: 50%;

left: 50%;

width: auto;

height: 100%;

transform: translate(-50%, -50%);

}

.player_scale_duration {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 12px;

background: #cfcfcf;

}

.player_ctrl + .player_scale_duration {

bottom: 60px;

height: 8px;

}

.player_scale_current {

width: 0;

height: 100%;

background: #73ab19;

transition: all 200ms linear;

border-radius: 0 6px 6px 0;

}

.player_scale_current.end {

border-radius: 0;

}

.player_ctrl {

display: flex;

align-items: center;

height: 60px;

padding: 0 10px;

color: #fff;

background: #58575c;

}

.player_ctrl svg {

height: 24px;

}

.player_pause {

position: absolute;

top: 50%;

left: 50%;

width: 50px;

height: 50px;

transform: translate(-50%, -50%);

transition: all 300ms linear;

}

.playing .player_pause {

opacity: 0;

}

.player_pause,

.player_volume {

cursor: pointer;

margin: 0 20px;

}

.player_date {

margin: 0 10px 0 auto;

font-size: 16px;

}

JQuery

100

101

jQuery(document).ready(function($) {

// Видео

(function(){

var $players = $('.player');

if (!$players.length) return;

$players.each(function () {

var $player = $(this),

$video = $player.find('video');

// Пауза при клике на видео

$video.on('click', function() {

if ($video.hasClass('playing')) {

$video[0].pause();

$video.removeClass('playing');

}

else {

$video[0].play();

$video.addClass('playing');

}

});

// Пауза при клике на описание

(function(){

var $cap = $('.promo_caption');

if (!$cap.length) return;

$cap.on('click', function() {

$video.trigger('click');

});

})();

// Пауза при клике на кнопку

(function(){

var $pause = $player.find('.player_pause');

if (!$pause.length) return;

$pause.on('click', function() {

$video.trigger('click');

});

})();

// Шкала прогресса

(function(){

var $current = $player.find('.player_scale_current'),

_duration = 0

// Определить Продолжительность

$video.on('canplay', function(event) {

_duration = $video[0].duration;

});

// Прогресс воспроизведения

$video.on('timeupdate', function(event) {

var curr = $video[0].currentTime / (_duration / 100);

$current.css('width', curr + '%');

if (curr == _duration) {

$current.addClass('end');

}

else {

$current.removeClass('end');

}

});

})();

// Звук

(function(){

var $volume = $('.player_volume');

if (!$volume.length) return;

$volume.on('click', function() {

$video[0].muted = $video[0].muted ? false : true;

$volume.find('.sound_st3').toggle();

});

})();

if ($video.is('[autoplay]')) {

$video[0].play();

}

});

})();

});