Воспроизвести видео, если все поля ввода не пусты

Question

У меня есть простая форма, я хочу воспроизвести видео HTML 5, когда все входные данные заполнены и не пусты.

Проблема:

Проверьте, не все ли входные данные формы пусты, еслиэто действительно воспроизводимое видео, иначе сделайте что-нибудь еще.

Вот мое решение

HTML:

 <video  id="videoPlayer" playsinline controls muted>
 </video>

<form action="/action_page.php" class="form">
  Enter your name:
  <input name="firstname" type="text">
  <input name="lastname" type="text">
  <br><br>
  <input type="submit">
</form>

JS

<script>
var movieSendData ="https://www.w3schools.com/html/mov_bbb.mp4"
var myVideo = document.getElementById('videoPlayer);

function playVideo(){
  myVideo.play();
}

(function() {
    var isValid = true;
    $('.form').each(function() {
      if ( $(this).val() === '' )
          isValid = false;
    });
playVideo(movieSendData);
  })();

</script>

К сожалению, мойРешение не работает, как ожидалось, что мне нужно изменить, чтобы получить то, что я хочу?любая помощь будет оценена

Answer 1

Вам нужно установить src для видео, а также вам нужна проверка if, вам также нужно перебирать вводы, а не формы.

<script>
var movieSendData ="https://www.w3schools.com/html/mov_bbb.mp4"
var myVideo = document.getElementById('videoPlayer);

function playVideo(src) {
  myVideo.src = src;
  myVideo.play();
}

(function() {
    var isValid = true;
    $('.form input, .form textarea, .form select').each(function() {
      if ( $(this).val() === '' )
          isValid = false;
    });
    if (isValid) {
       playVideo(movieSendData);
    }
  })();

</script>

это будет выполняться при инициализации (если формане раньше, чем тег script не будет работать, он не найдет .form), если вы хотите запустить submit, вам нужно:

$('.form').submit(function() {
    var isValid = true;
    $('.form input, .form textarea, .form select').each(function() {
      if ( $(this).val() === '' )
          isValid = false;
    });
    if (isValid) {
       playVideo(movieSendData);
    }
    return false;
 });

, если вы получите сообщение об ошибке, вы можете получить значение src в nullтогда это означает, что он не может найти ваш тег видео, тогда вам нужно будет обернуть весь код в $(function() { /* your code */ });

EDIT : фрагмент рабочего стека

$(function() {
  var movieSendData ="https://www.w3schools.com/html/mov_bbb.mp4"
  var myVideo = document.getElementById('videoPlayer');

  function playVideo(src) {
    myVideo.src = src;
    myVideo.play();
  }

  $('.form').submit(function(e) {
      e.preventDefault();
      var isValid = true;
      $('.form input, .form textarea, .form select').each(function() {
        if ( $(this).val() === '' )
            isValid = false;
      });
      if (isValid) {
         playVideo(movieSendData);
      }
   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video  id="videoPlayer" playsinline controls muted>
 </video>

<form class="form">
  Enter your name:
  <input name="firstname" type="text">
  <input name="lastname" type="text">
  <br><br>
  <!-- the input need to have a value or it can be a button -->
  <input type="submit" value="submit">
</form>