HTML5 видео - сделать все видео кликабельным на Android для воспроизведения?

Question

Я добавил html5-видео в свое мобильное веб-приложение, и для того, чтобы воспроизвести это видео, пользователь должен нажать на маленький значок воспроизведения в левом нижнем углу видео.Можно ли настроить видео таким образом, чтобы, если пользователь щелкает какую-либо часть, которую он воспроизводит?

Тестирование на Android 2.3.3, на iOS все видео выглядит кликабельным

Мой текущий код:

<video src="video/video.mp4" type="video/mp4" width="300" height="188" class="video" controls preload="none" poster="img/test.png" webkit-playsinline>
    </video>

Спасибо

Answer 1

Вы можете сделать простой click перехват события.

jQuery('video').click(function() {
    if (this.paused) {
        this.play();
    } else { 
        this.pause();
    }
    return false;
});

Проблема с этим заключается в том, что он переопределит все стандартные элементы управления видео. Это означает, что пользователь не сможет использовать элементы управления браузера по умолчанию. Если вы хотите, чтобы ваше видео имело свое поведение, например то, что вы спрашиваете, вы должны использовать фреймворк, например VideoJS . Эта структура имеет искомое поведение "click-to-play", а также возможность стилизовать все аспекты элементов управления воспроизведением видео.

Answer 2

Используя jQuery, вы можете попробовать что-то вроде этого:

$('.video').click(function() {
    this.play();
});

Answer 3

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