есть сайт на Opencart 2. На этом сайте есть страница с просмотром видео. Как сделать, чтобы при воспроизведении видео в определенные моменты проигрывания этого видео в самом плеере отображались ссылки на какие-либо страницы? Я решил использовать тег video, у меня получилось вывести в самом плеере браузера по тайм-кодам информацию из файла *.vtt, но проблема в том, что там ссылки выводятся также в виде текста. вот моя разметка:
<?php if($video) { ?>
<video id="main_video" src="<?=$video;?>" autoplay="autoplay" muted="false" controls="controls">
<track class="hidden" kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>
</video>
<? } ?>
вот содержимое файла subtitles_en.vtt:
WEBVTT FILE
link
00:00:03.000 --> 00:00:15.500
tdekor.ld
вот еще у меня получилось получить таймкоды и подписи к нимиз этого файла с помощью js
var videoElement = document.querySelector("video");
var trackElements = document.querySelectorAll("track");
var linkToProduct = document.querySelector(".link_to_product");
// for each track element
for (var i = 0; i < trackElements.length; i++) {
trackElements[i].addEventListener("load", function() {
var textTrack = this.track; // gotcha: "this" is an HTMLTrackElement, not a TextTrack object
var isSubtitles = textTrack.kind === "subtitles"; // for example...
// for each cue
for (var j = 0; j < textTrack.cues.length; ++j) {
var cue = textTrack.cues[j];
// do something
}
});
}