时间戳

首页 > 解决方案 > 通过单选按钮“视频选择屏幕”

javascript - 通过单选按钮“视频选择屏幕”

问题描述

我有以下问题。我尝试制作某种“视频选择屏幕”，您可以在其中选择要观看的视频类型，并在播放视频时选择要收听的音乐类型（每个视频文件都有一个可能的选择）。我试图编写一个函数来更改视频的 src，但我无法让它工作，我不知道为什么。

到目前为止，这是我的代码：

HTML：

<form>
<h3>Customize your own Showreel</h3>
                        <fieldset>
                                <input type="radio" id="commercials" name="selection" value="com">
                                <label for="commercials">Commercials</label>

                                <input type="radio" id="mixed" name="selection" value="mix" checked="checked">
                                <label for="mixed">Mixed</label>

                                <input type="radio" id="videoclip" name="selection" value="vid">
                                <label for="videoclip">Videoclips</label>
                        </fieldset>

<h4>Select Music</h4>
                    <fieldset>
                        <input type="radio" id="pop" name="musicselection" value="pop" checked="checked">
                        <label for="pop">Pop</label>
                        <input type="radio" id="rock" name="musicselection" value="rock">
                        <label for="rock">Rock</label>
                    </fieldset>

                    <video id="theVideo" controls></video>
                    <button type="button" id="theVideo" onclick="playselected();">play</button>

</form>

Javascript：

function playselected() {
              var music = document.getElementsByName("musicselection");
              var selection = document.getElementsByName("selection");
              var theVid = document.getElementById("theVideo");

                if (music.value == "com" && selection.value == "pop") {
                    theVid.src = "videos/com_pop.mp4";
                }

                if (music.value == "com" && selection.value == "rock") {
                    theVid.src = "videos/com_rock.mp4";
                }
                if (music.value == "mix" && selection.value == "pop") {
                    theVid.src = "videos/mix_pop.mp4";
                }
                if (music.value == "mix" && selection.value == "rock") {
                    theVid.src = "videos/mix_rock.mp4";
                }
                if (music.value == "vid" && selection.value == "pop") {
                    theVid.src = "videos/vid_pop.mp4";
                }
                if (music.value == "vid" && selection.value == "rock") {
                    theVid.src = "videos/vid_rock.mp4";
                }
            }

这就是我想出的。我希望我解决这个问题的尝试甚至指向正确的方向。（我是 javascript 和 html 的新手，我正在自学如何编码。请不要太苛刻）

标签： javascripthtml

解决方案

这是因为getElementsByName返回一个 NodeList，这意味着您必须遍历集合才能访问所选单选按钮的值。因此，您可以使用 将 NodeList 转换为数组Array.prototype.slice.call(<NodeList>)，对其执行过滤以返回选中的单选按钮，然后使用它来访问其值：

var musicValue = Array.prototype.slice.call(music).filter(function(musicRadioButton) {
  return musicRadioButton.checked;
})[0].value;

var selectionValue = Array.prototype.slice.call(selection).filter(function(selectionRadioButton) {
  return selectionRadiobutton.checked;
})[0].value;

对上面代码块的进一步解释：

  1. Array.prototype.slice.call(music)将musicNodeList 转换为元素数组
  2. 然后我们使用.filter()遍历返回的数组。在回调中，我们确保我们只选择/过滤选中的单选按钮，即.checked属性返回一个真实值。
  3. [0]调用后链.filter()以获取第一个选中的单选按钮
  4. 链式.value获取第一个选中的单选按钮的值

然后在您的 if/else 块中，您可以参考and而不是检查music.valueor ：selection.valuemusicValueselectionValue

function playselected() {
  var music = document.getElementsByName("musicselection");
  var selection = document.getElementsByName("selection");
  var theVid = document.getElementById("theVideo");

  var musicValue = Array.prototype.slice.call(music).filter(function(musicRadioButton) {

    return musicRadioButton.checked;
  })[0].value;
  var selectionValue = Array.prototype.slice.call(selection).filter(function(selectionRadioButton) {
    return selectionRadiobutton.checked;
  })[0].value;

  if (musicValue == "com" && selectionValue == "pop") {
    theVid.src = "videos/com_pop.mp4";
  }

  if (musicValue == "com" && selectionValue == "rock") {
    theVid.src = "videos/com_rock.mp4";
  }
  if (musicValue == "mix" && selectionValue == "pop") {
    theVid.src = "videos/mix_pop.mp4";
  }
  if (musicValue == "mix" && selectionValue == "rock") {
    theVid.src = "videos/mix_rock.mp4";
  }
  if (musicValue == "vid" && selectionValue == "pop") {
    theVid.src = "videos/vid_pop.mp4";
  }
  if (musicValue == "vid" && selectionValue == "rock") {
    theVid.src = "videos/vid_rock.mp4";
  }
}
<form>
  <h3>Customize your own Showreel</h3>
  <fieldset>
    <input type="radio" id="commercials" name="selection" value="com">
    <label for="commercials">Commercials</label>

    <input type="radio" id="mixed" name="selection" value="mix" checked="checked">
    <label for="mixed">Mixed</label>

    <input type="radio" id="videoclip" name="selection" value="vid">
    <label for="videoclip">Videoclips</label>
  </fieldset>

  <h4>Select Music</h4>
  <fieldset>
    <input type="radio" id="pop" name="musicselection" value="pop" checked="checked">
    <label for="pop">Pop</label>
    <input type="radio" id="rock" name="musicselection" value="rock">
    <label for="rock">Rock</label>
  </fieldset>

  <video id="theVideo" controls></video>
  <button type="button" id="theVideo" onclick="playselected();">play</button>

</form>

推荐阅读