安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
带缩略图的轻量级 jQuery 视频播放器,实现轻松播放 HTML5 视频
编号:视频播放器

带缩略图的轻量级 jQuery 视频播放器,实现轻松播放 HTML5 视频

大小 2 MB
总文件 12 个
发布 2024-06-29
更新 2026-01-17
架构 jQuery
分类 前端资源 - 多媒体
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

    这是一款基于 Web 的轻量级多特性 jQuery 视频播放器,可在网页上播放 HTML5 视频,并带有缩略图,该插件支持对播放器进行全面配置,包括播放器界面、控件图标等。它还可以通过添加 GTM 跟踪视频。用户可通过其界面播放、暂停、转发和控制音量。想要实现在 html 上播放视频,只需要一次简单 jQuery 调用即可实现。

以下是一些用于创建/自定义“带有缩略图的jQuery视频播放器”的高级配置选项。

showControls

显示播放器控件,如果您希望播放器在没有用户界面的情况下玩游戏,请关闭。默认值:true,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   showControls: false,
 });
showControlsOnHover

允许玩家的控件在悬停时显示(鼠标悬停)。默认值:true,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   showControlsOnHover: false,
 });
showControlsOnHover

鼠标移动结束后,视频控件隐藏之前的时间间隔(以毫秒为单位)。默认值:3000,类型:数字。

 $("#my_video").RTOP_VideoPlayer({
   showControlsOnHover: 5000,
 });
showScrubber

显示视频的 scubber/进度条。默认值:true,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   showScrubber: true,
 });
showTimer

显示视频经过的时间和总时间。默认值:false,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   showTimer: true,
 });
showPlayPauseBtn

在视频播放器控件中显示播放/暂停按钮。默认值:true,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   showPlayPauseBtn: true,
 });
showSoundControl

显示静音按钮和音量步长。默认值:false,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   showSoundControl: true,
 });
keyboardControls

允许空格键播放和暂停视频。默认值:true,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   keyboardControls: true,
 });
themeClass

将类添加到父 div 中,以便更轻松地自定义外观。默认值:'rtopTheme',类型:String。

 $("#my_video").RTOP_VideoPlayer({
    themeClass: 'custom-class',
 });
fontAwesomeControlIcons

对常见控件图标使用awesome字体图标。如果要使用其他字体库,请将此选项设置为 false。默认值:true,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   fontAwesomeControlIcons: true,
 });
autoPlay

页面加载时自动播放视频,但会将视频静音。默认值:false,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   autoPlay: true,
 });
allowPlayPause

如果用户可以播放/暂停视频,则与自动播放功能一起使用。默认值:true,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   allowPlayPause: false,
 });
loop

自动重播视频。默认值:false,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   loop: false,
 });
allowReplay

允许用户在完成后重播视频。默认值:true,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   allowReplay: true,
 });

模态中的视频播放器

如果要在模态窗口中播放视频,可以使用以下与模态相关的配置选项。

playInModal

以固定位置模式打开视频。默认值:false,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   playInModal: true,
 });
showCloseBtn

显示模态的关闭按钮,该按钮将在用户单击时关闭模态。默认值:false,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   showCloseBtn: false,
 });
closeModalOnFinish视频结束后自动关闭模态。默认值:false,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
   closeModalOnFinish: false,
 });

视频的 GTM 标记

GTM 代表 Google Tags Manager,可自动跟踪您网站上嵌入式 HTML5 视频播放器的交互。如果要在视频中添加 GTM 服务,可以使用以下一组配置选项。

gtmTagging

发送 GTM 标签,必须在页面上设置 GTM 才能工作。默认值:false,类型:Boolean。

 $("#my_video").RTOP_VideoPlayer({
  gtmTagging: true,
});
gtmTagging{}

一个对象,用于保存视频期间应发送的标记的信息。默认值:null,类型:Object。

 $("#my_video").RTOP_VideoPlayer({
   gtmTagging: {
  time: '',
  type: '',
  name: '',
},
});

模板目录结构

    免责声明

    • 如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
    • 以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
    • 如有侵犯你版权的,请来信(邮箱:tongzhewangluo@163.com)指出,核实后本站将立即改正。
    • 如有链接无法下载、失效或广告,请通过网站提供的微信联系作者!
    • 以上资源售价只是赞助,不代表代码或者素材本身价格,收取费用仅维持本站的服务器开销。
    • 所有代码素材效果均为演示打包,最终效果请参考演示效果,本站不提供任何技术支持和服务。
    • 代码素材均为虚拟物品,演示和描述无错的情况下,无法进行退换服务。

    最新资源

    金融理财与企业咨询 HTML 建站模板 | 含理财顾问/营销咨询双首页与商城模块

    康硕腾

    金融理财与企业咨询 HTML 建站模板 | 含理财顾问/营销咨询双首页与商城模块
    理发店与美发沙龙 HTML 建站模板 | 含项目价目表/发型师主页/剪发作品视频集

    海珑

    理发店与美发沙龙 HTML 建站模板 | 含项目价目表/发型师主页/剪发作品视频集
    深浅两种基调各四套首页的数字营销机构 HTML 模板 | 品牌策划/新媒体代运营

    奥瑞索

    深浅两种基调各四套首页的数字营销机构 HTML 模板 | 品牌策划/新媒体代运营
    图片标记点坐标映射工具,跨裁切比例自动换算JSON

    图片打点工具

    图片标记点坐标映射工具,跨裁切比例自动换算JSON
    SVG Logo 动画特效 GSAP路径绘制+文字滑入演绎

    Logo开场动画

    SVG Logo 动画特效 GSAP路径绘制+文字滑入演绎
    抽屉式 3D 图片轮播特效 React + Motion 弹性切换相册

    3D图片轮播

    抽屉式 3D 图片轮播特效 React + Motion 弹性切换相册