帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery HTML5自定义视频播放器插件 支持延迟加载

帝国模板之家 2020-12-09 网页特效 评论

插件介绍

这是一款基于jQuery的HTML5视频播放器插件。该插件支持延迟加载视频,点击视频封面图像后开始播放,显示/隐藏播放器控件,自定义控件图标,设置视频封面图像,页面加载时自动播放,视频自动回放功能。

使用方法

1. 在页面中加载jQuery库和视频播放插件js文件。

<link rel="stylesheet" href="dist/css/rtop.videoPlayer.VERSION.min.css" />
<script src="https://code.jquery.com/jquery-VERSION.slim.min.js"></script>
<script type="text/javascript" src="/dist/js/rtop.videoPlayer.ERSION.min.js"></script>

2. 加载Awesome字体(可选,但强烈推荐)自定义图标。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/VERSION/css/all.css">

3. 在页面中添加播放视频。

<div id="example">
  <video src="sample.mp4" type="video/mp4" poster="sample.jpg" playsinline>
    <source src="sample.mp4" type="video/mp4">
  </video>    
</div>

4. 要启用延迟加载功能,在HTML5视频中添加以下数据属性:

<div id="example" 
     data-video="sample.mp4" 
     data-type="video/mp4" 
     data-poster="sample.jpg"
>

5. 初始化视频播放插件。

var myPlayer = $('#example').RTOP_VideoPlayer();

6. 启用/禁用播放器控件。

var myPlayer = $('#example').RTOP_VideoPlayer({
    showControls: true,
    showControlsOnHover: true,
    controlsHoverSensitivity: 3000,
    showScrubber: true,
    showTimer: false,
    showPlayPauseBtn: true,
    showSoundControl: false,
    showFullScreen: false,
    keyboardControls: true,
});

7. 决定是否使用Awesome字体图标。默认值:true。

var myPlayer = $('#example').RTOP_VideoPlayer({
    fontAwesomeControlIcons: true
});

8. 在弹出窗口模式中显示和播放视频。默认值:false。

var myPlayer = $('#example').RTOP_VideoPlayer({
    playInModal: true,
    showCloseBtn: true,
    closeModalOnFinish: true
});

9. 启用/禁用自动播放。默认值:false。

var myPlayer = $('#example').RTOP_VideoPlayer({
    autoPlay: true,
    allowPlayPause: true
});

10. 更多配置选项默认值。

var myPlayer = $('#example').RTOP_VideoPlayer({
    themeClass: 'rtopTheme',
    loop: false,
    allowReplay: true,
    gtmTagging: false, // sends GTM tags
    gtmOptions: {}
});

11. API 方法。

myPlayer.pause();
myPlayer.play();
myPlayer.close();
myPlayer.goTo(20);

12.该插件还支持Vimeo视频。 

var myPlayer = $('#example').RTOP_VideoPlayer({
    vimeo_url: ''
});
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言