jquery 视频插件

jQuery视频插件是一种基于jQuery库的视频播放和控制插件,它可以方便地在网页中嵌入视频播放器,实现视频的播放、暂停、音量调节等功能,jQuery视频插件有很多,如Video.js、jPlayer、Flowplayer等,这些插件各有特点,可以根据项目需求选择合适的插件。

1、Video.js

jquery 视频插件

Video.js是一个开源的HTML5和Flash视频播放器,它基于HTML5和JavaScript技术,可以在不依赖任何第三方插件的情况下实现跨平台的音视频播放,Video.js提供了丰富的API接口,可以方便地实现视频的播放、暂停、音量调节等功能,Video.js还支持自定义皮肤和字幕功能,可以根据项目需求进行定制。

使用Video.js的方法如下:

(1)引入Video.js库文件和样式文件:

<link href="https://vjs.zencdn.net/7.11.4/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

(2)创建一个video标签,并设置其ID和class属性:

<video id="my-video" class="video-js" controls preload="auto" width="640" height="360">
  <source src="movie.mp4" type="video/mp4" />
  <p class="vjs-no-js">
    要查看此视频,请启用JavaScript,并考虑升级到支持HTML5视频的Web浏览器
  </p>
</video>

(3)初始化Video.js播放器:

var player = videojs('my-video');

jquery 视频插件

(4)实现视频播放、暂停、音量调节等功能:

// 播放视频
player.play();
// 暂停视频
player.pause();
// 调整音量,参数为0-1之间的小数,0表示静音,1表示最大音量
player.volume(0.5);

2、jPlayer

jPlayer是一个轻量级的jQuery音乐和视频播放器插件,它支持MP3、MP4等多种格式的音视频文件,jPlayer提供了丰富的API接口,可以方便地实现视频的播放、暂停、音量调节等功能,jPlayer还支持自定义皮肤和歌词显示功能,可以根据项目需求进行定制。

使用jPlayer的方法如下:

(1)引入jPlayer库文件和样式文件:

<br/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>

jquery 视频插件

(2)创建一个audio或video标签,并设置其ID和class属性:

<audio id="jquery_jplayer_1" class="jp-jplayer" role="application" tabindex="0">
  <source src="http://www.kellymooremusic.com/wp-content/uploads/2018/07/KellyMooreMusic_-_I_Will_Wait_For_You_320kbps_mp3_file_1mb_16bit_44100hz_stereo_iTunes_Plus_AAC_v2.m4a" type="audio/mpeg"/>
</audio>

(3)初始化jPlayer播放器:

$(document).ready(function(){  
  $("#jquery_jplayer_1").jPlayer({              
    ready: function () {                
      $(this).jPlayer("setMedia", {          
        title: "Blind Melon - No Rain",      
        mp3: "http://www.kellymooremusic.com/wp-content/uploads/2018/07/KellyMooreMusic_-_I_Will_Wait_For_You_320kbps_mp3_file_1mb_16bit_44100hz_stereo_iTunes_Plus_AAC_v2.m4a",      
        oga: "http://www.kellymooremusic.com/wp-content/uploads/2018/07/KellyMooreMusic_-_I_Will_Wait_For_You_320kbps_ogg_file_1mb_16bit_44100hz_stereo_iTunes_Plus_VBR_v2.m4a",      
      }).jPlayer("play");             
    },              
    swfPath: "https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/Jplayer",              
    supplied: "mp3, oga",              
    wmode: "window",               
    useStateClassSkin: true,            
    autoBlur: false,                 
    smoothPlayBar: true,             
    keyEnabled: true,                 
    remainingDuration: true,           
    bufferTime: 1,                   
    toggleDuration: 2,                 
    volume: 0.8,                      
    muted: false,                      
    loop: false,                      
    errorAlerts: true,                 
    warningAlerts: false,              
    showTooltips: true,                 });         });  });  ```
(4)实现视频播放、暂停、音量调节等功能:

// 播放视频或音频

$("#jquery_jplayer_1").get(0).play(); // For HTML5 audio and video tags in IE9+ (including IE9) and other browsers that support HTML5 media playback (e.g Chrome, Firefox, Safari) or the Flash fallback for non-HTML5 browsers (e.g IE6, IE7, IE8) if no HTML5 support is detected on the user's browser or device (e.g Android devices with default browser). Note that this will not work in Internet Explorer versions prior to IE9 due to their lack of support for HTML5 media playback capabilities and the Flash fallback option provided by jPlayer for those browsers is disabled by default as it is considered a security risk due to its vulnerabilities and limitations in handling different types of media formats and codecs which can lead to unexpected behavior or errors on the user's device or system when used improperly or maliciously by attackers or hackers who exploit those vulnerabilities and limitations to compromise the security of the user's device or system or steal sensitive information from it without the user's knowledge or consent."

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构》的官方网站或公开发表的信息,内容仅供参考使用!本站为非盈利性质站点,本着免费分享原则,发布内容不收取任何费用也不接任何广告! 【若侵害到您的利益,请联系我们删除处理。投诉邮箱:i77i88@88.com】

本文链接:http://7707.net/jquery/202401154801.html

发表评论

提交评论

评论列表

还没有评论,快来说点什么吧~