安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
带缩略图的轻量级 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)指出,核实后本站将立即改正。
    • 如有链接无法下载、失效或广告,请通过网站提供的微信联系作者!
    • 以上资源售价只是赞助,不代表代码或者素材本身价格,收取费用仅维持本站的服务器开销。
    • 所有代码素材效果均为演示打包,最终效果请参考演示效果,本站不提供任何技术支持和服务。
    • 代码素材均为虚拟物品,演示和描述无错的情况下,无法进行退换服务。

    最新资源

    React手绘涂鸦风格海滩日落:基于Rough.js的创意插画特效

    蜡笔涂鸦

    React手绘涂鸦风格海滩日落:基于Rough.js的创意插画特效
    石油天然气与能源工业工厂专用 HTML 响应式网站模板

    欧利仕

    石油天然气与能源工业工厂专用 HTML 响应式网站模板
    室内装修设计公司专用 HTML 响应式网站模板

    茵缇奥

    室内装修设计公司专用 HTML 响应式网站模板
    SaaS与科技创业公司专用 HTML 响应式网站模板

    传运智

    SaaS与科技创业公司专用 HTML 响应式网站模板
    AI中转站、人工智能后台管理 HTML 响应式网站模板

    艾德米奥

    AI中转站、人工智能后台管理 HTML 响应式网站模板
    AI智能机构与科技创业专用 HTML 响应式网站模板

    泰可利

    AI智能机构与科技创业专用 HTML 响应式网站模板