安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
带缩略图的轻量级 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: '',
},
});

模板目录结构

    最新资源

    音频可视化网格地形特效,随音乐起伏的 Canvas 三维山脉粒子

    音频可视化

    音频可视化网格地形特效,随音乐起伏的 Canvas 三维山脉粒子
    山地、海滨与城市三种度假场景酒店 HTML 建站模板,山景度假村客房预订响应式网页模板

    宿悦

    山地、海滨与城市三种度假场景酒店 HTML 建站模板,山景度假村客房预订响应式网页模板
    圆反演几何演示,可拖动图形实时看反演像的互动画板

    反演几何

    圆反演几何演示,可拖动图形实时看反演像的互动画板
    图片随机切割特效,Canvas 沿直线反复切开照片并让碎片飘散

    图片切割

    图片随机切割特效,Canvas 沿直线反复切开照片并让碎片飘散
    不依赖任何框架的品牌策略工作室 HTML 建站模板,创意设计公司作品集网页模板

    涅拉沃

    不依赖任何框架的品牌策略工作室 HTML 建站模板,创意设计公司作品集网页模板
    十二套首页明暗成对的酒店 HTML 建站模板,度假酒店客房预订与餐饮设施网页模板

    宿汇

    十二套首页明暗成对的酒店 HTML 建站模板,度假酒店客房预订与餐饮设施网页模板