我有一个简单的应用程序,其中包含来自 JSON 数组的视频下拉列表,
JSON数据包含,标题,id,按钮,位置,URL
我希望用户从像这样的下拉列表中选择一个视频
所以如果用户选择例如从下拉列表中旅行它应该显示一个旅行视频,其中包含类似这样的按钮,
到目前为止,这是我尝试过的
HTML
<div class="showme"> Show dropdown
<select id="movies-container">
<option value="" selected disabled hidden>Choose here</option>
</select>
</div>
<video src="" id="video">
results goes here
</video>
js
function PopulateDropDownList() {
//Build an array containing movies records.
var movies = [
{
"title": "travel",
"left": 201,
"top": 209,
"movieid": "10",
"movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
"buttons": [
{
"left": 81,
"top": 51,
"start_time": 1,
"end_time": 2,
"buttonid": "10_1",
"btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
}
]
}
]
var movieContainerID = document.getElementById("movies-container");
//Add the Options to the DropDownList.
for (var i = 0; i < movies.length; i++) {
var option = document.createElement("OPTION");
console.log(movies[i]);
// movieContainerID.prop('selectedIndex', 0);
//Set movie Name in Text part.
option.innerHTML = movies[i].title;
//Set movieId in Value part.
option.value = movies[i].movieid;
//Add the Option element to DropDownList.
movieContainerID.options.add(option);
}
}
$('.showme').on('click', function(){
$('#movies-container').addClass('show');
PopulateDropDownList();
});
这是我正在处理的 js fiddle :live demo
我需要做什么才能得到我想要的?到目前为止我卡住了,任何帮助或建议将不胜感激。
最佳答案
您还有很多工作要做。不清楚您想用这些按钮“做什么”,您没有它们的内容或操作。所以我现在不打算解决这个问题。
关于选择,这里是我工作的基础:
- 在 Change 上,使用选择从数据源获取更多详细信息
- 创建了一个
<video>
容器或从选择中更新一个
这是一个工作示例:https://jsfiddle.net/Twisty/Lb7eh3zc/31/
HTML
<div class="showme"> Show dropdown
<select id="movies-container">
<option value="" selected disabled hidden>Choose here</option>
</select>
</div>
<video id="show-video" style="display:none;"></video>
JavaScript
$(function() {
var movies = [{
"title": "travel",
"left": 201,
"top": 209,
"movieid": "10",
"movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
"buttons": [{
"left": 81,
"top": 51,
"start_time": 1,
"end_time": 2,
"buttonid": "10_1",
"btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
}]
}];
function PopulateDropDownList() {
var movieContainerID = $("#movies-container");
//Add the Options to the DropDownList.
$.each(movies, function(k, v) {
console.log(v);
var option = $("<option>", {
value: v.movieid
}).html(v.title).appendTo(movieContainerID);
});
movieContainerID.change(function() {
var movieid = $("option:selected").val();
var movie = getMovie(movieid);
$("#show-video").attr({
src: movie.movie_url,
controls: "controls",
type: "video/mp4"
}).show();
});
}
function getMovie(id) {
var m = false;
$.each(movies, function(k, v) {
if (v.movieid == id) {
m = v;
}
});
return m;
}
$('.showme').on('click', function() {
$('#movies-container').addClass('show');
PopulateDropDownList();
});
});
我觉得最好将事物分解成函数。当用户单击以显示下拉列表时,它会被填充。现在用户将进行选择,并触发 change
事件。在这里,我们可以确定如何处理该选择。
我们更新了 <video>
通过 jQuery 元素现在有正确的来源,然后我们展示它。
HTML5 没有办法给视频添加按钮。您可以控制视频、开始、停止等……但不能向其中添加内容。现在你可以创建按钮并将它们 float 。如果您希望它们在特定时间出现,您需要观看计时器并触发它们显示。正如我所说,你面前的路还很长。
希望这对您有所帮助。
关于javascript - 如何显示来自 JSON 的视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56639408/