首页 文章

可见时自动播放媒体元素播放器

提问于
浏览 次
0

我有一个wordpress网站，使用原生播放器，mediaelement来显示视频 . 我正在尝试添加一些代码以便在可见时自动播放视频，在屏幕外时暂停 . 我一直在处理上一个问题here（使用isInViewport JQuery插件）中的一段代码，但是这里的播放/暂停事件不需要在调用播放/暂停功能之前初始化mediaelement播放器，但是我得到一个错误："Uncaught TypeError: Cannot read property 'player' of undefined"每个滚动视频可见 .

JQUERY：

$(function() {
    $(window).scroll(function() {
        $('.wp-video-shortcode').each(function() {
            var str = $(this).attr('id');
            var arr = str.split('-');
            typecheck = arr[0];
            if ($(this).is(":in-viewport") && typecheck == "video") {
                var video = new MediaElementPlayer($(this).attr('id'), {
                    success: function(mediaElement) {
                        $(this).attr('id')[0].player.pause(); 
                        console.log($(this).attr('id') + 'video is playing');

                    }
                });

                //$(this).[0].play();
            } else {
                //$(this).[0].pause();
            }

        });
    });
});

HTML：

<video class="wp-video-shortcode" id="video-1115-1" width="792" height="470" poster="http://cdn.ultrasoundoftheweek.com/post_files/uotw16.1.jpg" loop="1" preload="none" controls="controls">
<source type="video/mp4" src="http://cdn.ultrasoundoftheweek.com/post_files/uotw16.1.mp4?_=1" /> 
<source type="video/webm" src="http://cdn.ultrasoundoftheweek.com/post_files/uotw16.1.webm?_=1" /> 
</video>
jquery html5 mediaelement.js

1 回答

  • 0

    对于其他任何挣扎于此的人来说，这是我的解决方案 . （此JQ上面的isInViewport和JQuery引用包含） . 适用于Safari / Chrome / FF最新版本 . 不适用于移动设备 . 我将开始处理媒体查询并为android分开编码 .

    $(function() {
    $(window).scroll(function() {
        $('.wp-video-shortcode').each(function() {
            var str = $(this).attr('id');
            var arr = str.split('_');
            typecheck = arr[0];
            if ($(this).is(":in-viewport( 400 )") && typecheck == "mep") {
                    mejs.players[$(this).attr('id')].media.play();
                    console.log($(this).attr('id') + 'video is playing');
            } else if (typecheck == "mep") {
                    mejs.players[$(this).attr('id')].media.stop();
            }
        });
    });
});
    回复于

相关问题