一个jQuery视频插件,它提供了有用的方法和事件来从JavaScript控制Youtube、Vimeo和HTML5视频。
1.在html页面底部包含jQuery库和jQuery视频控制器插件。
- <script src="/path/to/cdn/jquery.min.js"></script>
- <script src="/path/to/jquery.video.min.js"></script>
2.将您的视频添加到网页中。
- <iframe class="video" src="YOUTUBE/VIMEO VIDEO"></iframe>
- <video class="video" controls="">
- <source src="video.mp4" type="video/mp4">
- <source src="video.webm" type="video/webm">
- </video>
3.初始化插件,我们就可以开始了。
- $('.video').video({
- // options
- attr_ready: 'data-video-ready',
- attr_playing: 'data-video-playing',
- attr_paused: 'data-video-paused',
- });
4.播放所有视频。
- $('.video').playVideo();
5.暂停所有视频。
- $('.video').pauseVideo();
6.停止所有视频。
- $('.video').stopVideo();
7.重新启动所有视频。
- $('.video').restartVideo();
8.将所有视频静音。
- $('.video').muteVideo();
9.取消所有视频的静音。
- $('.video').unmuteVideo();
10.搜索到20秒。
- $('.video').seekToVideo(30);
11.将事件添加到视频中。
- $('.video').addVideoEvent('ready', function(e, $video, video_type) {
- // Triggers if a video is ready.
- });
- $('.video').addVideoEvent('play', function(e, $video, video_type) {
- // Triggers on play or resume
- });
- $('.video').addVideoEvent('pause', function(e, $video, video_type) {
- // Triggers on pause
- });
- $('.video').addVideoEvent('finish', function(e, $video, video_type) {
- // Triggers if a video is finished
- });
- $('.video').addVideoEvent('destroy', function(e, $video, video_type) {
- // Triggers if the plugin is destroyed
- });
12.全局设置。
- // The suffix for all the video events (for unique purposes)
- $.video.event_suffix = '_video';
- // An array with callbacks for the onYouTubeIframeAPIReady() call
- $.video.youtube_api_ready_callbacks = [],
- // The youtube iframe api url
- $.video.youtube_iframe_api = 'https://www.youtube.com/iframe_api'
版本0.1.4(2023-03-08)