html5播放器禁止拖拽功能实例(教学内容禁止拖动观看)

html5播放器禁止拖拽功能实例(常用于场景:企业培训、在线教学内容禁止学员拖动视频进行观看)

实例1:参数开启后,视频教学内容或视频课件将不允许拖动进度条。

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
volume:0.75,
vid: '138dcc9667850eba0705401288131bf1_1',
ban_seek:'on',
});
</script>

代码参数提示:

ban_seekstringoff设置为 on 播放器将会彻底禁止拖拽

 

实例2: 禁止记住播放进度

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
volume:0.75,
vid: '138dcc9667850eba0705401288131bf1_1',
ban_history_time:'on', 
});
</script> 

 禁止记住播放的时间进度。

ban_history_timestringoff是否禁止记住播放进度,下次打开会从上次进度打开(设置watchStartTime后还是会从watchStartTime处开始播放),默认为off(不禁止),on为禁止

 

 应用效果截图:

MR直播

无延迟直播

视频加密与安全

在线导播台

 

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现js拖拽功能,可以使用html5的拖放API或者jQuery UI等库来实现。下面是一个使用jQuery UI实现拖拽功能的例子: ```html <!DOCTYPE html> <html> <head> <title>拖拽功能实现</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.4.7/js/jsplumb.min.js"></script> <style type="text/css"> #container{ position: relative; width: 500px; height: 500px; border: 1px solid #000; } .block{ position: absolute; width: 50px; height: 50px; background-color: #f00; cursor: move; text-align: center; line-height: 50px; font-size: 20px; color: #fff; } </style> <script type="text/javascript"> $(function(){ //初始化jsPlumb实例对象 jsPlumb.ready(function(){ var instance = jsPlumb.getInstance({ Endpoint: ["Dot", {radius:2}], Connector:"StateMachine", HoverPaintStyle: {stroke:"#1e8151", strokeWidth:2 }, ConnectionOverlays: [ [ "Arrow", { location:1, id:"arrow", length:14, foldback:0.8 } ] ] }); }); //初始化拖拽功能 $(".block").draggable({ containment: "#container", stop: function(event, ui) { //更新jsplumb连接线 jsPlumb.repaint(ui.helper); } }); //初始化连接功能 jsPlumb.connect({ source: "block1", target: "block2" }); }); </script> </head> <body> <div id="container"> <div id="block1" class="block">1</div> <div id="block2" class="block" style="top: 100px; left: 100px;">2</div> </div> </body> </html> ``` 在上面的代码中,首先通过jQuery UI的draggable方法初始化了拖拽功能,然后通过jsPlumb的connect方法初始化了连接功能。同时在jsPlumb.ready方法中初始化了jsPlumb实例对象,以便后续使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值