使用javascript时,控件未在HTML5视频上显示

时间:2015-11-02 03:55:21

标签: javascript html5

我想要在我的网页上显示一个视频,除了控件没有显示外,一切正常。我有一个问题,以我想要的宽度和高度显示视频,所以我使用了一个小的javascript黑客来做到这一点。 autoplay属性有效,但在应用controls属性时,它似乎不起作用。有什么想法吗?

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

1 个答案:

答案 0 :(得分:2)

通过在视频上放置画布,您遇到的问题是阻止内置的html视频控件。我的建议是使用html和javascript调用视频API来实现自己的视频控件(播放,暂停,音量,搜索器等)。你甚至可以让它比丑陋的内置控件更漂亮。您的控件可以包含在叠加画布上方的图层中,因此视频将显示在其上方,叠加层和控件集上方。

您可以阅读一些关于实施自己的控件herehere

的内容

希望这会有所帮助:)