jQuery，石工，JWPlayer，无限滚动追加“< script></script>" PHP包含文件中的标签不起作用 [英] jQuery, Masonry, JWPlayer, Infinite-Scroll Append "<script></script>" Tags within PHP Include File Doesn't Work
问题描述
首先，我将简要介绍我要完成的工作.
First I will provide a quick overview of what I am trying to accomplish.
我有一个PHP主页面，该页面从mySQL数据库加载图像，文本和视频(使用JWPlayer播放)，并使用Masonry进行布局.我也在使用Infinite-Scroll，它使用以下代码加载其他内容:
I have a main PHP page that loads images, text, and videos (which play using JWPlayer) from a mySQL database and uses Masonry for the layout. I am also using Infinite-Scroll which loads additional content using the following code:
$container.masonry( 'appended', $newElems, true );
其他内容是通过一个名为loadMore.php的PHP页面加载的.
Additional Content is loaded via a PHP page called loadMore.php
<nav id="page-nav">
<a href="loadMore.php?n=2"></a>
</nav>
在上面的 lodeMore.php 页面中，我正在从数据库中加载更多文本，图像和视频.如果从数据库加载的项目是视频，我尝试使用一个名为" videoPlayer.php "的php包含文件显示该视频.此PHP包含文件的代码如下:
Within the above lodeMore.php page I am loading more text, images and videos from the database. If an item loaded from the database is a video I attempt to display it using a php include file called "videoPlayer.php". The code for this PHP include file is as follows:
<?PHP
echo"<div id='$i'>Loading the video player ...</div>
<script type='text/javascript'>
jwplayer('$i').setup({
flashplayer: 'player.swf',
image: '$imagePath',
skin: 'images/slim.zip',
width: 250,
height: 141,
plugins: {
gapro: { accountid: 'UA-30548455-1'}
},
file: '$videoPath'
});
</script>";
?>
上面的文件适用于最初加载主页时显示的视频内容，但是，如果该文件是通过 append 和 loadMore加载的，则可以正常显示. php 页面，它不会显示视频播放器的上述javascript.
The above file works fine for video content that is displayed when the main page initially loads, however, if it is loaded via append and the loadMore.php page it doesn't display the above javascript for the video player.
我发现您似乎无法使用append来添加包含<script> </script>的内容
标记，因为</script>标记会导致追加停止或关闭.我已经尝试过各种解决方案，包括使用<\/script>关闭脚本标签，但是，即使这似乎也不起作用.
I have discovered that it appears that you can't use append to append content that contain <script> </script>
tags because the </script> tag causes the append to stop or close. I have tried various solutions I have come across on here including closing the script tag using <\/script> instead, however, even this doesn't seem to work.
如果任何人都可以提供一些见解或可能的方式，我可以使用append获取<script></script>标签，以使视频播放器正常工作，那就太好了！
If anyone can provide some insight or a possible way that I can use append to get the <script></script> tags for the video player to work that would be great!
-
这是我的代码，其中包括您推荐的广告代码:
Hi jwatts, so here is my code including the code you recommended I ad:
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 295,
isAnimated: !Modernizr.csstransitions,
isFitWidth: true
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
alert("test");
//Find Image and Video Paths from Div tags
$($newElems).find("div.content-container").each( function() {
var imgpath = $(this).find("div.content-imgpath").text();
var vidpath = $(this).find("div.content-vidpath").text();
var id = $(this).find("div.content-id").attr("id");
loadPlayer( id, imgPath, vidPath );
});
alert("test 2");
//Hide Paths
/*
div.content-imgpath, div.content-vidpath {
display: none;
}
*/
});
}
);
});
在我打电话给石工后，我添加了您推荐的代码，但由于第一个 test 警报起作用，但是第二个 test 2 警报似乎出现了一些麻烦.似乎没有用.另外，我还推荐了隐藏图像和视频路径的代码，因为出于某种原因，它似乎阻止了通过loadMore.php加载其他内容.
After I call masonry, I added the code you recommended, but it seems to be having some troubles as the first alert of test works, but the second test 2 doesn't seem to be working. Also I have commended out the code to hide the image and video path because for some reason it seems to be preventing the loading of additional conent via loadMore.php.
有什么想法我错过了吗?我还在主页顶部为JWVideo播放器添加了 loadPlayer javascript函数.
Any ideas what I have missed? I have added the loadPlayer javascript function for the JWVideo player at the top of the main page as well.
推荐答案
也许在主页上创建一个加载jwplayer的函数
Perhaps create a function on the main page that loads jwplayer
function loadPlayer(id, imgPath, vidPath) {
jwplayer(id).setup({
flashplayer: 'player.swf',
image: imgPath,
skin: 'images/slim.zip',
width: 250,
height: 141,
plugins: {
gapro: { accountid: 'UA-30548455-1'}
},
file: vidPath
});
}
像这样返回HTML:
<div class="content-container">
<div class="content-imgpath">path name here</div>
<div class="content-vidpath">vid path here</div>
<div class="content-id" id='$i'>Loading the video player ...</div>
</div>
确保隐藏了图像路径和视频路径:
Make sure the image path and video path are hidden:
div.content-imgpath, div.content-vidpath {
display: none;
}
致电masonry后，请执行以下操作:
After you call masonry do this:
$($newElems).find("div.content-container").each( function() {
var imgpath = $(this).find("div.content-imgpath").text();
var vidpath = $(this).find("div.content-vidpath").text();
var id = $(this).find("div.content-id").attr("id");
loadPlayer( id, imgpath, vidpath );
});
更新:修复了上面的变量名...
Update: Fixed the variable name above...
这篇关于jQuery，石工，JWPlayer，无限滚动追加“< script></script>" PHP包含文件中的标签不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
