Question

我试图设置一个使用JPlayer播放的视频，在视频播放器上设置相当多的库存。我希望这只能在整个包含DIV的视图中开始播放。

我已经查找了当元素在视图中时用于触发事件的JQuery示例。在Stack上我发现的所有那些＆＃34;滚动到视图＆＃34;或＆＃34;出现＆＃34;。对我来说，这意味着（错误地可能）需要滚动来触发事件;如果用户的屏幕大到足以在页面加载时显示DIV，我希望即使不需要滚动也可以播放。

如果没有可见的条件声明，视频会完美运行，尽管屏幕外。我已尝试使用Appear插件但未成功（FB控制台中未报告任何错误），所以我显然做错了什么：

＆＃13;

		$(document).ready(function() {
    			$("#jquery_jplayer_1").jPlayer({
				ready: function () {
					$(this).jPlayer("setMedia", {
						title: "Website Name",
						m4v: "video.mp4",
						preload: "auto"
						//poster: "Big_Buck_Bunny_Trailer_480x270.png"
					}).jPlayer("play");
				},
				swfPath: "jplayer",
				supplied: "m4v",
				size: {
					width: "600px",
					height: "338px",
					cssClass: "jp-video-360p"
				},
				useStateClassSkin: true,
				autoBlur: false,
				keyEnabled: true
			});

＆＃13;

    					<div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
						<div class="jp-type-single">
							<div id="jquery_jplayer_1" class="jp-jplayer"></div>
							<div class="jp-gui">
								<div class="jp-video-play">
									<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
								</div>
							</div>
							<div class="jp-no-solution">
								<span>Update Required</span>
								To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
							</div>
						</div>
					</div>	


	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.appear.js"></script>
	<script type="text/javascript" src="jplayer/jquery.jplayer.min.js"></script>

＆＃13;

我尝试在jPlayer函数周围添加if语句： if ($('#jquery_jplayer_1').visible(true)) { ..... } - 对我不起作用。

而且出现了插件：

        $('#jquery_jplayer_1').appear(function() {
            .....
        });

但我没有到达那里。任何有关如何使用预可见或滚动可见的JPlayer实例的指针都会在您看到它时开始播放？

Answer 1

这就是我要做的：

$(document).ready(function() {
    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "Website Name",
                m4v: "video.mp4",
                preload: "auto"
            });
            playIfVisible();
        },
        swfPath: "jplayer",
        supplied: "m4v",
        size: {
            width: "600px",
            height: "338px",
            cssClass: "jp-video-360p"
        },
        useStateClassSkin: true,
        autoBlur: false,
        keyEnabled: true
    });
    function playIfVisible(){
        if($(window).scrollTop() + $(window).height() >= $("#jquery_jplayer_1").offset().top){
            $("#jquery_jplayer_1").jPlayer("play");
        }
    }
    $(document).scroll(function(){
        if($("#jquery_jplayer_1").data().jPlayer.status.paused){
            playIfVisible($("#jquery_jplayer_1"));
        }
    });
});

如果播放器已暂停且当前屏幕处于暂停状态，则会检查每个滚动事件。请注意，我还删除了.jPlayer("play")以阻止自动播放。

在元素滚动上运行Jplayer进入视图

1 个答案: