Форум

Quark_ · #1 (**permalink**) 03.09.2017, 12:46

Добавил видео через source + скрипт, чтобы можно было его запускать по клику

<div class="video">
<video poster="/images/video/rest.jpg">
<source src="/images/video/rest.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
</div>
 <script>
$("video").prop("volume", 0.3).click(function(){this[this.paused?"play":"pause"]()});
</script>

Но, в Опере, а иногда и в Хроме, по клику возникает ошибка Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Если скрипт убрать, то в Опере проблема все равно остается...
В гугле нашел пару вариантов на stackoverflow, но честно говоря, или не верно добавляю решения, или они конфликтуют с моим скриптом.
Помогите решить проблему.

рони · #2 (**permalink**) 03.09.2017, 14:01

Quark_,
может так?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .play{
    border-color: #006400;
  }
  video{
    border:  ridge 5px #FFFACD;
  }

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

  <script>
$(function() {
var video = $('video');
video.prop("volume", 0.3).on('click ended',function(){
   var el = $(this);
   el.is('.play') ?  el.removeClass('play')[0].pause() :  el.addClass('play')[0].play()
})
});
  </script>
</head>

<body>
<video  width="320" height="176" >
  <source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>


<video  width="320" height="176" >
  <source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<video  width="320" height="176" >
  <source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

</body>
</html>

Quark_ · #3 (**permalink**) 03.09.2017, 14:13

Да, работает, СПС.

Форум

Справочник

Discord чат

Курсы javascript