一个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）

• 已修复缺少视频配置的问题

预览截图

基于jQuery Youtube/Vimeo/HTML5视频控制器 Video.js