video won't pause after change of content

JhonQ commented 12 years ago

I'm using document.getElementById("").innerHTML to change the content where videos or images go through a javascript function, like:

  function switchSubject()
{
     document.getElementById("first").innerHTML='<object width="640" 
height="360">
<param name="movie" value="http://www.youtube.com/v/mhTd4_Ids80?
version=3&fs=0&amp;hl=ro_RO&amp;rel=0&modestbranding=1&showinfo=0">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/mhTd4_Ids80?
version=3&fs=0&amp;hl=ro_RO&amp;rel=0&modestbranding=1&showinfo=0"
type="application/x-shockwave-flash" width="640" height="360"
allowscriptaccess="always" allowfullscreen="false"></embed></object>';
}

where the element is:

<li id="first">    

<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/v/1H40wUz-Fd8?
version=3&fs=0&amp;hl=ro_RO&amp;rel=0&modestbranding=1&showinfo=0">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/1H40wUz-Fd8?
version=3&fs=0&amp;hl=ro_RO&amp;rel=0&modestbranding=1
&showinfo=0" type="application/x-shockwave-flash" 
width="640" height="360" allowscriptaccess="always" 
allowfullscreen="false">
</embed></object>   

</li>

Now the problem is that after the content has changed, if i play the video and then scroll to the next slide the video won't pause anymore like it did before the change.

Any ideas on how to fix this? Thanks!

Mottie commented 12 years ago

Hi JhonQ!

Trying to add an embedded object using innerHTML doesn't work properly across all browsers. You'll need to use swfobject.js (included with the plugin) to update the videos inside the slider.

Try this:

// id = "first"
// videoUrl = http://www.youtube.com/v/1H40wUz-Fd8?version=3&fs=0&amp;hl=ro_RO&amp;rel=0&modestbranding=1&showinfo=0
function switchSubject(id, videoUrl) {
    var vid = $('#' + id).find('[id]').attr('id') || '', // get previous swfobject video id
        api = "&enablejsapi=1&version=3&playerapiid=" + vid; // initialize YouTube api
    swfobject.embedSWF(videoUrl + api, id, "640", "360", "9.0.0");
}

JhonQ commented 12 years ago

Hi Mottie, thanks, but how do I do that?

Mottie commented 12 years ago

Opps sorry, I added the code above.

JhonQ commented 12 years ago

ok thanks, I don't have any more time right now so I'll look into it tomorrow. Thanks a lot.

JhonQ commented 12 years ago

Yeah, I didn't get much of that. So do I have to replace videoUrl variable with the url of the video that's going to replace the old one(I know this sounds dumb)? Also, the same with 'id'?

Forgot to mention that I'm trying to replace all the objects in the slider using:

<span onclick="switchSubject()"/>

Sorry.

JhonQ commented 12 years ago

Ok, I've changed

<span onclick="switchSubject()"/>

with

<span onclick="switchSubject('first', 'http://www.youtube.com/v/0dfZ9BXaNyE')"/>

The thing is that it replaces the first video with the second one after it , not with the one I want to replace with.

Mottie commented 12 years ago

Yes, that's right, the first parameter is the id of the <li> holding the video and the second parameter is the video url.

In the second video, use the id for the second video. I'm guessing it's something like this:

<span onclick="switchSubject('second', 'http://www.youtube.com/v/xxxxxxxxxxxx')"/>

JhonQ commented 12 years ago

I did:

<span onclick="switchSubjects('first', 'http://www.youtube.com/v/0dfZ9BXaNyE?
version=3&amp;hl=ro_RO&amp;rel=0'); 
switchSubjects('second', 'http://www.youtube.com/v/BDMgIcbMOuA?
version=3&fs=0&amp;hl=ro_RO&amp;rel=0&modestbranding=1&showinfo=0'); 
switchSubjects
('third', 'http://www.youtube-nocookie.com/v/yTCRwi71_ns?
version=3&fs=0&amp;hl=ro_RO&amp;rel=0&modestbranding=1&start=4&showinfo=0'); 
switchSubjects
('fourth', 'http://www.youtube.com/v/KFyAUpyZkR4?
version=3&fs=0&amp;hl=ro_RO&amp;rel=0&modestbranding=1&showinfo=0'); 
switchSubjects
('fifth', 'http://www.youtube.com/v/glKXsth7hLA?
version=3&fs=0&amp;hl=ro_RO&amp;rel=0&modestbranding=1&showinfo=0');"/>

because I have five of them, but still the same problem, video won't pause anymore, also the last one doesn't show up at all.

JhonQ commented 12 years ago

I was thinking about refreshing the page after the videos have been changed but that will just return the originals videos. I've tried calling the function in <body onload=""> but it would be the same problem as above. I'm running out of ideas. I can't make another page with different content in the slider, cuz that would mean I'd have to fill the server with a lot of pages in the long run.

Is it possible to generate the content of the slider in PHP and than put it inside the

<ul id="slider">
</ul>

through javascript in html, or do I have to have some content allready in the slider? Also, let me know if I'm talking nonsense.

Mottie commented 12 years ago

Give me some time to work on a demo for you... where is that span located?

JhonQ commented 12 years ago

The span is just in the body. It's before the ul slider and all the contents in it. Please tell me what you intend to do, maybe I can save you some time cuz I'm allready working on generating a separated html for each type of content the slider will have. Basically if I have only pictures, I make a page in wich the contents of the slider are those pictures and if I have videos I make another page with those videos and so on.

And in every one of theese pages there will be a div that will contain thumbnails linking to those pages. Something like on youtube related videos.

I thought of doing separate pages because I don't know if users will be able to find specific type of contents on search engines if all of them will be accesible from one page only. In php I'm using

file_put_contents()

to generate the html. Of course there will be a database containing those contents.

JhonQ commented 12 years ago

Oh and please tell me what do you think about this. Do you know of a simpler way to do it? Thanks.

Mottie commented 12 years ago

Hiya!

Well, I guess there are some issues with the video extension that I need to fix... I tried:

completely swapping out the videos and initializing the second set, but the video extension doesn't seem to control the updated video, I'll need time to dig into this further.
adding a second hidden video to each panel and just switch which one was visible, but the video extension was only initializing the second set of videos in each panel... yay more bugs to fix.
adding a second slider which is initially hidden until the user switched subjects, but apparently the second video slider has all the same ID's as the first, so both sliders were showing the second video content.

So, I guess I'm not getting very far right now. I still need to rewrite the video extension.

JhonQ commented 12 years ago

Well, I'll keep going with the php generated html for each set of slider content. It's easier that way, and I think more SEO friendly. I think...

Either way, if you still wanna work on this go ahead. If I knew that it would be as eficient for search engines as it is with seperate html pages, I would encourage you to do it, but I don't know that yet so...

Anyway, thanks again for your help thus far.

I'll keep it open for awhile.

CSS-Tricks / AnythingSlider

video won't pause after change of content #446