Попробуйте поместить document.getElementById
в setTimeout()
Например.
setTimeout(function(){
console.log(document.getElementById('whatever'));
}, 100);
Если это сработает, тогда это просто проблема синхронизации.
YouTube обеспечивает ActionScript API.
Используя это, Вы могли загрузить видео в Flash с помощью их API и затем иметь приложение Flash, создают аннотации на слой выше видео.
Или, альтернативно, если Вы хотите избегать создания чего-то в Flash, с помощью API JavaScript YouTube, Вы могли бы привлечь ОТДЕЛЕНИЯ HTML по плееру YouTube на Вашей веб-странице. Просто помните при встраивании плеера для имения WMODE="transparent"
в списке параметрических усилителей.
Настолько использующий пример с YouTube:
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer", wmode: "transparent" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID&enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>
И затем необходимо быть в состоянии нарисовать аннотации по фильму YouTube с помощью CSS/DHTML.
Joe Berkovitz записал пример приложения, названный ReviewTube
, который "Позволяет пользователям создавать основанные на времени подзаголовки для любого видео YouTube, а-ля закрыл ввод субтитров. Эти подписи становятся публично доступными, и посетители сайта могут просмотреть набор видео с подписями. Думайте о нем как о “subtitle граффити wall” для YouTube!"
приложение является примером, используемым для демонстрации платформы/подхода MVCS для того, чтобы создать приложения Flex.
http://www.joeberkovitz.com/blog/reviewtube/
Не уверенный, если это поможет с цветными прямоугольниками и этажеркой, но это - достойное место для запуска.
Сам плеер имеет Javascript API, который мог бы быть полезен для синхронизации видео, если Вы принимаете решение сделать свое собственное annotation-thingamajig
.