HTML5 Video Element на iPad не охватывает события OnClick или TouchStart?
-
25-09-2019 - |
Вопрос
Я пытаюсь прикрепить некоторые события к видеоэлементу HTML5 внутри моего веб-приложения iPad, но они, кажется, не стреляют? Я проверил это как на устройстве, так и в симуляторе и получите те же результаты. Однако события (для onClick по меньшей мере) работают нормально в настольном Safari. Я также пытался обнять видеоэлемент для Div и событиями огонь в порядке? Кто-нибудь еще встречается с этим и имеет идею для работы?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test video swipe</title>
</head>
<body>
<video src='somevid.mp4' id='currentlyPlaying' width='984' height='628' style='background-color:#000;' controls='controls'></video>
<script>
var theVid = document.getElementById("currentlyPlaying");
theVid.addEventListener('touchstart', function(e){
e.preventDefault();
console.log("touchstart");
}, false);
theVid.addEventListener('click', function(e){
e.preventDefault();
console.log("click");
}, false);
theVid.addEventListener('touchmove', function(e){
console.log("touchmove");
}, false);
theVid.addEventListener('touchend', function(e){
console.log("touchend");
}, false);
theVid.addEventListener('touchcancel', function(e){
console.log("touchcancel");
}, false);
</script>
</body>
</html>
Решение
Видеоэлемент, на iPad, проглотит события, если вы используете атрибут элементов управления. Вы должны предоставить свой собственный элемент управления, если вы хотите, чтобы элемент ответил на сенсорные события.
Другие советы
С моего собственного довольно болезненного опыта за последние пару недель я могу начать такой список (по крайней мере, для iPad 3.2). Некоторые из этих «функций» могут быть задокументированы, но соответствующее предложение часто трудно найти.
- То
volume
Собственность игнорируется (вы можете установить его, и он будет изменен, но фактический том на устройстве не будет затронут). - То
currentTime
Собственность только для чтения. Мой обходной путь для этого должен звонитьload()
, который, по крайней мере, позволяет мне сбросить к началу зажима. - то
onended
Событие не будет опубликоваться надежно, если элементы управления не видны. Мой обходной путь для этого - следить заtimeupdate
событие и сравнитеcurrentTime
к томуduration
- как ты говоришь,
autobuffer
а такжеautoplay
отключены. - Видео не будет кэшировать локально независимо от настроек кэша приложения.
- Многие правила CSS не функционируют, как ожидалось, при применении к
<video>
Тег - например.opacity
а такжеz-index
Оба кажутся неэффективными, что означает, что вы не можете тускнеть или скрывать видео. Вы можете установитьdisplay:none
, но это очень резко.
Как я уже говорю, это, вероятно, не исчерпывающий список, и я приветствую дополнения или исправления.
(Кроме того, после много Googling, я нашел список здесь из скудного подмножества методов и свойств плагинов QT, которые поддерживаются на мобильных сафари).