HTML5 video & jQuery: показать/скрыть элементы управления при нажатии

Question

У меня есть функция щелчка jQuery, настроенная для воспроизведения/приостановки видео в формате HTML5, и мне интересно, как я могу продолжать показывать и скрывать элементы управления. Таким образом, я хотел бы сначала скрыть элементы управления, т. Е. Когда будет отображаться графический объект плаката, а затем показать их, когда видео кликнуто, чтобы воспроизвести (а также снова скрыть их, когда видео кликнуто для паузы.)

У меня есть скрипка, созданная here.

Большое спасибо за любую помощь.

$("video#click").click(function(){ 
 
    this.paused?this.play():this.pause(); 
 
    return false; 
 
});

#click { 
 
    max-width: 500px; 
 
    height: auto; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<video preload="auto" id="click"> 
 
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' /> 
 
</video>

Answer 1

Это немного сложнее, чем это может показаться, что должно быть, из-за способа встроенного контроля поведения СМИ. Первая проблема заключается в том, что у вас нет способа узнать, активно ли пользователь взаимодействует с элементами управления. Поэтому, если вы скрываете элементы управления каждый раз, когда пользователь нажимает, вы скрываете их, пока они ищут или регулируют громкость. Поэтому я предлагаю, чтобы у вас не было видео паузы при щелчке, но вы все равно можете играть по клику.

Вторая проблема заключается в том, что видео приостановлено и запускает событие «пауза» всякий раз, когда пользователь ищет элементы управления. Таким образом, вы должны только удалить элементы управления, когда кнопка мыши не установлена. Вот как это могло бы выглядеть.

var $video = $("#click"), //jquery-wrapped video element 
    mousedown = false; 

$video.click(function(){ 
    if (this.paused) { 
     this.play(); 
     return false; 
    } 
    return true; 
}); 

$video.on('mousedown', function() { 
    mousedown = true; 
}); 

$(window).on('mouseup', function() { 
    mousedown = false; 
}); 

$video.on('play', function() { 
    $video.attr('controls', ''); 
}); 

$video.on('pause', function() { 
    if (!mousedown) { 
     $video.removeAttr('controls'); 
    } 
}); 

Вы также можете сделать то же самое для сенсорных событий, и вы можете фильтровать, чтобы убедиться, что это только левая кнопка мыши. Я оставлю это до вас.

Вот ссылка на рабочий пример: http://jsbin.com/soyate/1/edit