2015-11-02 3 views
0

У меня есть видео, которое я хочу показать на моей веб-странице, все работает, за исключением того, что элементы управления не отображаются. У меня была проблема с отображением видео по моей желаемой ширине и высоте, поэтому я использовал небольшой хакерский хакер, чтобы сделать это так. Атрибут autoplay работает, но при применении атрибута управления он не работает. Есть идеи?Элементы управления не отображаются на HTML5 Видео при использовании javascript

Вот мой HTML

<canvas id="canvas" height="500" width="1300"> 
    <video id="video" controls> 
     <source src="videos/Trailer.mp4" type="video/mp4"> 
    </video> 
    </canvas> 

и Javascript

function updateVideo() { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var myVideo = document.getElementById('video'); 
    ctx.drawImage(myVideo, 0, 0, 1300, 500); 

} 

setInterval (updateVideo, 24); 
+0

кажется, ваша проблема является '' контейнера, почему у оберточной видео на холсте? и почему 'setInterval'? Рабочая скрипка здесь: http://jsfiddle.net/hb7hjquj/ – martinezjc

+0

Причина для холста заключается в том, что я могу настроить соотношение сторон видео, чтобы оно могло быть 1300, 500, а не родное. Как я уже сказал, я использовал это как взломать, и я знаю, что он работает без функции canvas. Невозможно настроить видео на 1300 x 500 без использования этого. Ну, по крайней мере, не так, как я нашел – seus

ответ

2

Проблема вы испытываете, помещая холст поверх видео блокирует встроенный управления HTML видео. Мое предложение - реализовать собственные средства управления видео (воспроизведение, пауза, громкость, искатель и т. Д.) С использованием html и javascript, вызывающих видео API. Возможно, вы даже можете сделать его более красивым, чем уродливые встроенные элементы управления. Ваши элементы управления могут содержаться в слое над наложенным холстом, и, таким образом, будет показано видео, над ним надпись и над ней ваш набор управления.

Вы можете прочитать немного о реализации собственных элементов управления here или here

Надеются, что это помогает :)

+1

Это сработало :) Я добавил свою собственную кнопку и получаю доступ к API – seus

+0

Рад помочь вам :) – martinezjc

Смежные вопросы