【问题标题】:disabling play/pause in embedded video using JW player使用 JW 播放器禁用嵌入式视频中的播放/暂停
【发布时间】:2012-02-08 09:39:41
【问题描述】:

我正在使用 JW (v 5.8) 播放器嵌入视频。我想这样做,以便启用自动启动,允许视频在页面加载后立即开始播放,控制栏被禁用,以便观众无法寻找视频中的随机点和播放/暂停功能点击视频被禁用。要嵌入 mp4 视频,我使用的是 JW 播放器。 我设法完成了前 2 个任务,但是要禁用单击屏幕时的播放/暂停功能,我正在尝试使用 clickproxy 插件,但它不起作用。我在下面粘贴我的代码:

<div id="mediaplayer">JW Player goes here</div>

<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript">
    jwplayer('mediaplayer').setup({
        'flashplayer': 'player.swf',
        'file': 'video.mp4',
        'controlbar': 'none',
        'width': '1000',
        'height': '1000',
        'plugins': 'clickproxy',
        'clickproxy.listener': 'clickListener',
        'autostart': 'true'
    });
function clickListener(obj)
{
}
</script>

现在使用此代码,视频加载,但甚至没有开始播放,并且由于 clickproxy 插件,单击视频不会执行任何操作。无论如何要完成我想要的? 我是 javascript 的新手,所以任何帮助将不胜感激!

谢谢!

【问题讨论】:

    标签: javascript jwplayer video-embedding


    【解决方案1】:

    啊,是的,播放器中曾经有执行此操作的功能(关于忽略点击),但它似乎一直被删除。

    这是我刚刚实施的适合我的解决方案,我只需插入 onPause javascript 事件并重新开始播放媒体。

        <script type='text/javascript'>
      jwplayer('mediaspace').setup({
        'flashplayer': '/jw/player.swf',
        'file': 'http://d3usowdy51yate.cloudfront.net/your-mp4-goes-here.mp4',
        'autostart': 'true',
        'icons': 'true',
        'stretching': 'fill',
        'controlbar': 'none',
        'width': '640',
        'height': '360',
        events: {
            onPause: function(event) {
              jwplayer('mediaspace').play();}
        }
      });
    </script>
    

    【讨论】:

    • 是的,我同意这不好 - 但也不会删除禁用点击的功能!我已经为播放器付费了,部分原因应该是我可以控制它的播放方式:-)。
    【解决方案2】:

    您可以使用#mediaplayer上的CSS属性pointer-events来防止点击事件进入视频:

    #mediaplayer {
        pointer-events: none;
    }
    

    您还可以滥用onPause 事件作为旧版浏览器&lt;IE9 的后备,例如:如果执行了暂停事件,则播放视频:

    jwplayer('mediaplayer').setup({
        flashplayer: 'player.swf',
        file: 'video.mp4',
        controlbar: 'none',
        width: '1000',
        height: '1000',
        autostart: 'true',
        events: {
            onPause: function() {
                this.play(true);
            }
        }
    });
    

    【讨论】:

    • ok @Sindre Sorhus , #mediaplayer { pointer-events: none; } 这工作正常,但如果我想阻止点击浏览视频,同时只能点击控制栏怎么办?跨度>
    • 那么你需要将pointer-events: none应用到不包括控制栏的更深层。
    • 怎么样?我们在谈论一个闪光物体,对吧?所以在&lt;div id="mediaplayer"&gt;JW Player goes here&lt;/div&gt; 内部创建了包含&lt;param ...&gt;&lt;object ...&gt;,所以在mediaplayer div 下方没有太多可以应用的css。还是我失去了什么?
    • 您需要将&lt;object&gt; 包装在&lt;div&gt; 中并在那里应用指针事件。
    【解决方案3】:

    尝试在播放器上放置一个与播放器尺寸相同的透明 div。

    【讨论】:

    • 我不知道这会有什么帮助......另外,你能否展示一些源代码来说明你将如何处理这个问题?正如我所说,我是 Web 编程和 JS 的完全新手。非常感谢!
    • 感谢 TheWiseJah 的创意。完美满足我的需求。
    • 创建一个 div - 透明或 50% 不透明度,样式 position:absolute, width:100%, height:100%, z-index: 10 然后 $(jwplayer().container ).append(div)
    猜你喜欢
    • 2014-04-01
    • 1970-01-01
    • 2015-03-20
    • 1970-01-01
    • 2014-04-22
    • 2020-04-12
    • 1970-01-01
    • 2016-07-09
    • 2014-08-02
    相关资源
    最近更新 更多