JWPlayer Iframe - 使用 javascript 停止视频

Question

我需要能够停止 JWPlayer Iframe 这是我正在使用的代码

html:

<a href="#" onclick="popup('video'); stopvideo();" >Click To Close</a>
<iframe src="<?php echo get_template_directory_uri(); ?>/scalerokuengine.php" id="rokuvideo" scrolling="no" frameBorder="0" width="960" height="470"> </iframe>

javascript:

function stopvideo() {
    document.getElementById('rokuvideo').jwplayer().stop();
}

这是 iframe 包含的代码：

<div id="se_video" width="100%" height="100%"></div>
        <script type="text/javascript" src="http://barakyah.embed.scaleengine.net/latest/jwplayer.min.js"></script>
        <script type="text/javascript">
            jwplayer('se_video').setup({
                'flashplayer': 'http://barakyah.embed.scaleengine.net/latest/jwplayer.swf',
                'autostart': 'false',
                'provider': 'rtmp',
                'streamer': 'rtmp://channel.tvstartup.net/barakyah-vod/play/',
                'file': 'sestore1/barakyah/newsystem/tvstartupvideo_Roku-Video_1446408572907.mp4',
                'stretching': 'exactfit',
                'modes': [
                    {
                    'type': 'flash',
                    'src': 'http://barakyah.embed.scaleengine.net/latest/jwplayer.swf'
                    },
                    {
                    'type': 'html5',
                    'config': {
                            'file': 'http://stream.tvstartup.net/barakyah-vod/play/sestore1/barakyah/newsystem/tvstartupvideo_Roku-Video_1446408572907.mp4/playlist.m3u8',
                            'provider': 'video'
                        }
                    }
                    ],
            'bufferlength': '5',
            'width': '940',
            'height': '470'
            });
        </script>

谢谢大家

Answer 1

您正在访问 iframe 节点并尝试调用 jwplayer() API，但这将不起作用。如果您的 iframe 在同一域中，您可以访问位于 inside iframe 的 jwplayer 节点并调用 API.

$("#rokuvideo").contents().find("#se_video").jwplayer().stop();

或

$("#rokuvideo").contentWindow.jwplayer().stop();

Answer 2

另一种选择是将 iframe 的 src 设置为 about:blank，然后在加载它时（如果用户再次请求）将其设置回所需的 src。例如使用 bootstrap 模态

$('#modalVideoDIV').on('hide.bs.modal', function () {
  // set src of iframe blank here (or to a silent page)
  $('#iframe').attr('src','about:blank');
})

$('#modalVideoDIV').on('show.bs.modal', function () {
  // set src of iframe to video
  $('#iframe').attr('src','YOUR SRC HERE');
})

Answer 3

或者在 hide 上使用这个可能更好：

$('#iframe').attr('src',$('#iframe').attr('src'));

重新加载框架然后停止。

JWPlayer Iframe - 使用 javascript 停止视频

JWPlayer Iframe - stop video using javascript

javascript

html

iframe

jwplayer