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

  • 源码大小:18.42KB
  • 所需积分:1积分
  • 源码编号:19JP-3156
  • 浏览次数:651次
  • 最后更新:2023年05月12日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

一个jQuery视频插件,它提供了有用的方法和事件来从JavaScript控制Youtube、Vimeo和HTML5视频。

基本用法:

1.在html页面底部包含jQuery库和jQuery视频控制器插件。

  1. <script src="/path/to/cdn/jquery.min.js"></script>
  2. <script src="/path/to/jquery.video.min.js"></script>

2.将您的视频添加到网页中。

  1. <iframe class="video" src="YOUTUBE/VIMEO VIDEO"></iframe>
  2. <video class="video" controls="">
  3. <source src="video.mp4" type="video/mp4">
  4. <source src="video.webm" type="video/webm">
  5. </video>

3.初始化插件,我们就可以开始了。

  1. $('.video').video({
  2. // options
  3. attr_ready: 'data-video-ready',
  4. attr_playing: 'data-video-playing',
  5. attr_paused: 'data-video-paused',
  6. });

4.播放所有视频。

  1. $('.video').playVideo();

5.暂停所有视频。

  1. $('.video').pauseVideo();

6.停止所有视频。

  1. $('.video').stopVideo();

7.重新启动所有视频。

  1. $('.video').restartVideo();

8.将所有视频静音。

  1. $('.video').muteVideo();

9.取消所有视频的静音。

  1. $('.video').unmuteVideo();

10.搜索到20秒。

  1. $('.video').seekToVideo(30);

11.将事件添加到视频中。

  1. $('.video').addVideoEvent('ready', function(e, $video, video_type) {
  2. // Triggers if a video is ready.
  3. });
  4.  
  5. $('.video').addVideoEvent('play', function(e, $video, video_type) {
  6. // Triggers on play or resume
  7. });
  8.  
  9. $('.video').addVideoEvent('pause', function(e, $video, video_type) {
  10. // Triggers on pause
  11. });
  12.  
  13. $('.video').addVideoEvent('finish', function(e, $video, video_type) {
  14. // Triggers if a video is finished
  15. });
  16.  
  17. $('.video').addVideoEvent('destroy', function(e, $video, video_type) {
  18. // Triggers if the plugin is destroyed
  19. });

12.全局设置。

  1. // The suffix for all the video events (for unique purposes)
  2. $.video.event_suffix = '_video';
  3.  
  4. // An array with callbacks for the onYouTubeIframeAPIReady() call
  5. $.video.youtube_api_ready_callbacks = [],
  6.  
  7. // The youtube iframe api url
  8. $.video.youtube_iframe_api = 'https://www.youtube.com/iframe_api'

更新日志:

版本0.1.4(2023-03-08)

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

预览截图