morphious
Posts: 25
Joined: Sat Apr 30, 2011 11:34 pm

JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

HI, I have been trying to find solution for this for a few days now.

The JW player from version 5.3 on has offered a new way to embed it's player and allows it to use JS instead of an object to embed it. With this they allow a fail over method that allows for html5 compatible browsers and IOS to play videos natively in place of the flash player.

Embedding this is a 2 part issue for me.

1 I would like to get the embed to work
2. I would like it to be 99% size of the open window, and when I change the browser size, the size of the video changes as well

so on too 1.

Here is how the new code works:

Code: Select all

<script type='text/javascript' src='/jwplayer/jwplayer.js'></script>

<div id='mediaplayer'></div>

<script type="text/javascript">
  jwplayer('mediaplayer').setup({
    'id': 'playerID',
    'width': '480',
    'height': '270',
    'file': '/videos/bunny.mp4',
    'image': '/thumbs/bunny.jpg',
    'modes': [
        {type: 'html5'},
        {type: 'flash', src: 'player.swf'},
        {type: 'download'}
    ]
  });
</script>

So the question is how can I get this to work in a highslide window that can be resided based on the browser size?

( I am sure this will help many if we can find a solution, as no other lightbox type system out there has made this work yet )

Regards

-D
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

Hi,

1. Put the player in its own page, then you can open this page using objectType: 'iframe' (http://highslide.com/examples/iframe.html)

2. As you can see from the JW player code, the player need a fixed width and height, so a 99% sized popup will not be possible.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
morphious
Posts: 25
Joined: Sat Apr 30, 2011 11:34 pm

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

Hello RR.

Ok

1. Great that is a Good Idea. but will I be able to use the full screen button? ( that is the problem when I did it this way before with a past system. )

2. Yes using the new JW code, it allows % tags to be used. We have tested and it works. But how to get HighSlide to do the same is the issue - with no fixed size. The goal is to get it to use as much page as possible but still have the x to close the box in the upper right.

-D
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
morphious
Posts: 25
Joined: Sat Apr 30, 2011 11:34 pm

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

Very Nice :-) works like a charm, even the fall over in the html5 in Ipad works! Thank you! was looking for a solution for this for the past few days.

one last one, is this possible? to change the size of the iframe window ( and the content ) on browser window resize? ( auto-resize )

Regards

-D
morphious
Posts: 25
Joined: Sat Apr 30, 2011 11:34 pm

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

Another question, on your sample you gave me above there is a white bar across the top. How do I disable this white bar and allow the close.png over the right upper corner of the video?

( sorry for the beginner questions.. )

Regards

-D
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

morphious wrote:one last one, is this possible? to change the size of the iframe window ( and the content ) on browser window resize? ( auto-resize )
No, Highslide doesnÔÇÖt have a live resize function.
morphious wrote:Another question, on your sample you gave me above there is a white bar across the top. How do I disable this white bar and allow the close.png over the right upper corner of the video?
See my updated demo page: http://www.roadrash.no/hs-support/jwpla ... frame.html
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
morphious
Posts: 25
Joined: Sat Apr 30, 2011 11:34 pm

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

HI, thanks for your help with this, so far so good!

2 issues tough. one, the audio does not stop when I close the iframe.

2. how can I change the color of the iframe background ( as it is loading , it shows a while background untill it loads the player. how can I change this? )


Regards

David

( almost have this perfect! )
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

1. My mistake. It should be preserveContent: false ÔÇô not 'false' in the onclick. My demo is corrected.

2. Change the background in this part of the highslide.css file:

Code: Select all

.highslide-html {
	background-color: white;
}
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
morphious
Posts: 25
Joined: Sat Apr 30, 2011 11:34 pm

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

OK Sound fixed.

2nd one those has issue, the one you gave me changed the Loading screen that has the progress next to it. The one I was speaking of was as the box is getting larger ( fadeing it ) the BG color of this box is white, this is the one I want to change.

Also in IE9 down the right side there is a 1 pixel white line down the border on the right.

Great job BTW>

-D
morphious
Posts: 25
Joined: Sat Apr 30, 2011 11:34 pm

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

OK Found it

Code: Select all

.highslide-image {
	border-width: 2px;
	border-style: solid;
	border-color:white;
}
This is the one :-)

Thanks for your help!
morphious
Posts: 25
Joined: Sat Apr 30, 2011 11:34 pm

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

ok, another one for you ,it is JWplayer/iframe related so I thought I would keep it in here.

on the second example, ( this is a different player in our system ) I would like to have it movable and borderless.

I have it set to 640x480 and it looks good with the close.png button in upper right.

Then I add draggable-header and remove /* Remove the header */ .highslide-header { display: none; } so it will display.

The box stays at 640 wide, and header shows up, but now there is a 10 pixel or so boarder on left and right side too. I removed section by section out of the css to see what is cuaing it, but I didnot find it in the css:-(

Please let me know how to get rid of the left and right boarders

Regards

-D
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

I need to see your live page, cause I canÔÇÖt get the same result as you when I adds draggable-header and removes display: none; for the header in my demo page.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
morphious
Posts: 25
Joined: Sat Apr 30, 2011 11:34 pm

Re: JWplayer 5.3+ JW embed/HTML 5 system and Highslide.

ok I will send you a mail..

- D

P.S I think you cannot see it because of the black borders in the sample video you are using ...

Return to “Highslide JS Usage”