Question

您好StackOverflow的朋友。很抱歉这样的菜鸟，但我无法让这个片段正常工作。我想做的就是从a中选择一个数字，然后更改以下播放器的视频src，替换url本身内的那个数字。例如，如果我选择数字13，我的计划是使用新来源刷新玩家，在这种情况下＆＃34; https://hostingsite.com/folder/Episode_13_Cartoon.mp4＆＃34;，但正如您所看到的那样我不习惯在js工作所以任何帮助将受到高度赞赏。在此先感谢，这里是片段

＆＃13;

function changeVideo() {
        document.getElementById("player").src = "https://hostingsite.com/folder/Episode_" + episode + "_Cartoon.mp4";
}

＆＃13;

<section class="players">
<div class="container">
   <div class="media-container">
      <span class="title">Episode Selector</span>
      <a onclick="{ document.getElementById('episode').value='13'; changeVideo();}">
      <a onclick="{ document.getElementById('episode').value='14'; changeVideo();}">
      <a onclick="{ document.getElementById('episode').value='15'; changeVideo();}">
      <select name="player1-sources" id="player1-sources">
         <option value="">Select source</option>
         <option value="12">12</option>
         <option value="13">13</option>
         <option value="14">14</option>
      </select>
      <video id="player" width="100%" height="100%" controls preload="auto" src="https://hostingsite.com/folder/Episode_default_Cartoon.mp4" type="video/mp4"></video>
   </div>
</div>

＆＃13;

Answer 1

尝试

function changeVideo() {
    document.getElementById("player").src = "https://hostingsite.com/folder/Episode_" + document.getElementById('episode').value + "_Cartoon.mp4";
}

我希望对你有所帮助。：）

Answer 2

＆＃13;

// get the select box element
let select = document.getElementById('player1-sources');

// add event listener for 'change'
select.addEventListener('change', changeVideo);

// do this when the select box value changes
function changeVideo() {
  
  // the event listener handler sets 'this' to the element that triggered the handler. So 'this' is our select element.
  
// using the ternary operator here
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

// set the protocol based on number
let protocol = this.value > 10 ? 'https' : 'http';

// set the source
let src = this.value.toLowerCase() === 'film' ? 'https://hostingsite.com/folder/Film_Cartoon.mp4' : protocol + "://hostingsite.com/folder/Episode_" + this.value + "_Cartoon.mp4";

// set player source
document.getElementById("player").src = src;

// log it out for fun
console.log(src);
}

＆＃13;

<section class="players">
  <div class="container">
    <div class="media-container">
      <span class="title">Episode Selector</span>

      <select name="player1-sources" id="player1-sources">
                 <option value="Film">Select source</option>
                 <option value="9">9</option>
                 <option value="10">10</option>
                 <option value="11">11</option>
                 <option value="12">12</option>
                 <option value="13">13</option>
                 <option value="14">14</option>
              </select>
      <video id="player" width="100%" height="100%" controls preload="auto" src="https://hostingsite.com/folder/Episode_default_Cartoon.mp4" type="video/mp4"></video>
    </div>
  </div>

＆＃13;

具有onclick选择器的视频源

2 个答案: