使用数组访问视频标签并输出视频标签

我真的很沮丧！所以这可能有点混乱。我需要有一个至少有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>

来源

2015-05-17 cascades

你想如何将它们放入标签？只要选择了一个值，你希望它被显示在你的html页面中，还是你想要更有趣的东西？ – EduardoFernandes

我试图让它显示到带有div的html中，所以我可以在框中放置一个寄宿生。 – cascades

看看这个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>

基本上我在由ID divTags发现你的HTML文件的最后创造了一个div标签。此外，在您的loadVid(vidForm)事件中，我删除了该警报，并在标识为divTags的div内将所选选项信息添加为新的div。

来源

2015-05-17 22:59:39 EduardoFernandes

如果这样可以解决您的问题，请勾选绿色的“检查”标志，以便将答案标记为正确。 – EduardoFernandes

使用数组访问视频标签并输出视频标签

回答

相关问题