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

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;
 });

如果你得到错误，你可以在 null 上获取值 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>

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

Play video if all input field are not empty

html

javascript

jquery

html5-video