Впереди много работы. Непонятно, что вы хотите «делать» с кнопками, у вас не было контента для них или действий. Так что я не буду сейчас это решать.
Что касается 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
. Здесь мы можем определить, что делать с этим выбором.
Мы обновляем элемент <video>
через jQuery, чтобы теперь иметь правильный источник, и затем мы показываем его.
HTML5 не имеет возможности добавлять кнопки к видео. Вы можете управлять видео, запускать, останавливать и т. Д., Но вы не можете добавлять к нему что-либо. Теперь вы можете создавать кнопки и плавать над ними. Если вы хотите, чтобы они появлялись в определенное время, вам нужно посмотреть таймер и активировать их показ. Как я уже сказал, вам предстоит долгий путь.
Надеюсь, это поможет.