使用数组访问视频url并在视频标记中输出

Using an array to access video urls and output in video tag

本文关键字：视频 输出 url 数组 访问      更新时间：2023-09-26

我真的很沮丧!这可能有点乱。我需要有一个下拉菜单至少2个视频的选择。一旦选择了一个，它需要用视频标签输出到html中。我没有为按钮创建函数，但我不需要帮助。

我能够得到一个警报，以显示我的onchange在下拉菜单中正在工作。我只是不知道我应该如何使用这两个视频剪辑而不是警报。

<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>Videos</title>
<style>
#v {
    border-style: solid;
    border-color: #000000;
    border-width: 2px;
}
</style>
<script>

var vidArray = new Array();
var outputDiv = document.getElementById("v");
function loadVid(vidForm){
    var select = vidForm.options.selectedIndex;
    var selectVid = vidForm.options[select].text;
    alert('selection working');
}

function vidOptions(url, title) {
    this.url = url;
    this.title = title;
    this.getVid = function(){return this.url + this.title;}
}

</script>
</head>
<body>
<form id = "vidForm">
<!--video-->
<video id = "v" width = "400">
<source src = "http://techslides.com/demos/sample-videos/small.mp4"/>
<source src = "http://playground.html5rocks.com/samples/html5_misc/chrome_japan.mp4"/>
Your browser is too old!
</video>
<br>
<!--dropdown menu-->
<select name = "options" id = "options" onchange="loadVid(this.form)">
  <option value=" ">Select a video</option>
  <option value="vid1">Playground</option>
  <option value="vid2">Lego</option>
</select>
<!--video buttons-->
<button id = "btn1" onclick = "play()">Play</button>
<button id = "btn2" onclick = "pause()">Pause</button>
<button id = "btn3" onclick = "rewind()">Rewind</button>
</form>
</body>
</html>

看看这个jsFiddle。它解决了你的问题。

你可以看到你的代码调整如下:

<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>Videos</title>
<style>
#v {
    border-style: solid;
    border-color: #000000;
    border-width: 2px;
}
</style>
<script>

var vidArray = new Array();
var outputDiv = document.getElementById("v");
function loadVid(vidForm){
    var select = vidForm.options.selectedIndex;
    var selectVid = vidForm.options[select].text;
    document.getElementById('divTags').innerHTML += "<div id='tagId" + select + "'>" + selectVid + "</div>";

}

function vidOptions(url, title) {
    this.url = url;
    this.title = title;
    this.getVid = function(){return this.url + this.title;}
}

</script>
</head>
<body>
<form id = "vidForm">
<!--video-->
<video id = "v" width = "400">
<source src = "http://techslides.com/demos/sample-videos/small.mp4"/>
<source src = "http://playground.html5rocks.com/samples/html5_misc/chrome_japan.mp4"/>
Your browser is too old!
</video>
<br>
<!--dropdown menu-->
<select name = "options" id = "options" onchange="loadVid(this.form)">
  <option value=" ">Select a video</option>
  <option value="vid1">Playground</option>
  <option value="vid2">Lego</option>
</select>
<!--video buttons-->
<button id = "btn1" onclick = "play()">Play</button>
<button id = "btn2" onclick = "pause()">Pause</button>
<button id = "btn3" onclick = "rewind()">Rewind</button>
<div id="divTags"></div
</form>
</body>
</html>

基本上，我在html文件的最后创建了一个div标签，由id divTags标识。此外，在您的loadVid(vidForm)事件中，我删除了警报，并将所选选项info添加为div中标识为divTags的新div。

相关文章：