播放视频，如果所有输入字段不为空

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>

这将在初始化运行（如果窗体是不是脚本标记之前将无法正常工作，也不会发现.form），如果你想运行在提交您需要：

$('.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则意味着它无法找到您的视频标签，那么你将需要包装在$(function() { /* your code */ });整个代码

编辑：工作组片段

$(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>