当使用javascript时，控件不显示在HTML5视频上

我有一段视频希望显示在我的网页上，除控件没有显示外，所有内容都正常工作。我在展示视频的时候遇到了一个问题，所以我使用了一点JavaScript hack来实现它。自动播放属性起作用，但在应用控件属性时似乎不起作用。有任何想法吗？当使用javascript时，控件不显示在HTML5视频上

这里是我的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);

来源

2015-11-02 seus

看来你的问题是''

画布的原因是，我可以调整视频的纵横比，因此它可以是1300,500而不是原生。正如我所说我已经使用这个作为黑客，我知道它没有画布功能，没有办法调整视频到1300×500没有使用这个。那么至少不是我找到了 – seus

你被放置在画布上的视频遇到的问题是阻止内置的HTML视频控件。我的建议是使用html和javascript调用视频API来实现您自己的视频控件（播放，暂停，音量，导引等）。你甚至可以使它更漂亮，然后是内置的控制器。您的控件可以包含在叠加画布上方的一个图层中，因此视频会显示在其上方，并在其上方显示您的控件集。

你可以阅读一些关于实现自己的控件here或here

希望这有助于:)

来源

2015-11-02 04:09:48 martinezjc

它工作:)我添加了我自己的按钮并访问API – seus

很高兴帮助你:) – martinezjc

当使用javascript时，控件不显示在HTML5视频上

回答

相关问题