[英]How to display video from JSON?
我有一个简单的应用,其中包含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小提琴: 现场演示
我需要做什么才能得到自己想要的东西? 到目前为止,您仍然遇到任何帮助或建议,我们将不胜感激。
您还有很多工作要做。 尚不清楚您要使用按钮“做什么”,您没有按钮或操作的内容。 因此,我暂时不会解决这个问题。
关于Select,这是我工作的基础知识:
<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
事件。 在这里,我们可以确定如何处理该选择。
我们通过jQuery将<video>
元素更新为正确的源,然后显示它。
HTML5无法将按钮添加到视频中。 您可以控制视频,开始,停止等...,但不能添加任何内容。 现在,您可以创建按钮并将其浮动。 如果希望它们出现在特定时间,则需要观看计时器并触发它们显示。 正如我所说,您还有很长的路要走。
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.