HTML5+CSS3+JQuery制造自定义视频播放器
HTML5+CSS3+JQuery打造自定义视频播放器? ?? ???div titleMute/Unmute/a? ?? ???/div/div复制
HTML5+CSS3+JQuery打造自定义视频播放器
? ?? ???<div title="Mute/Unmute"></a>
? ?? ???</div>
</div>复制代码注意,我们使用元素的class属性来代替ID属性是为了方便在一个页面上使用多个播放器。
打包成jQuery插件
创建好控制按钮后我们需要配合多媒体元素的API来实现视频控制的目的,正如前面提到的一样我们将我们的播放器打包成jQuery插件,这样可以很好的实现复用,代码如下:
? ?? ?? ?? ?? ? $gVideo.wrap($video_wrap);
? ?? ?? ?? ?? ? $gVideo.after($video_controls);复制代码这里先假设您了解jQuery并知道如何创建一个jQuery插件,因为这个不在本文的讨论范围之内,在上面这段脚本中我们使用jQuery动态创建视频控制工具条的元素,接下来为了绑定事件我们需要获取对应的元素: