Jw Player: Cross-Browser "Display:None" Player Behavior

JW Player: cross-browser display:none player behavior

This is an issue with Internet Explorer. While FF, Chrome, and Safari will kill Flash, IE doesn't. The only way we've been able to ensure that the player stops is to keep track of all active players on the page and call stop.

Best,

Zach

Developer, LongTail Video

JW Player not working in Chrome

First of all , we should let jwplayer's javascript to build the html code.

Initilaize jwplayer with js, and use HTML5 video in html like this:

<center>            
<video controls="controls" id="container" poster="http://www.example.com/yourvideothumbs/videothumb.jpg" width="693" height="388">
<source src="http://www.example.com/videos/jourvideo.mp4" type="video/mp4" />
</video>
</center>

Javascript:

if(navigator.userAgent.toLowerCase().match(/(android)/) || navigator.userAgent.toLowerCase().match(/(chrom)/) ){
//wee must force flash video player in chrome, because mp4 video files is not supported yet in chrome's HTML5 video implementation.
modes = [{type: 'flash', src: '[JWPLAYERBASEDIR]/swf/player.swf'}];
}else{
modes = [ {type: 'html5'},{type: 'flash', src: '[JWPLAYERBASEDIR]swf/player.swf'}];
}

jwplayer("container").setup({
'modes':modes,
});

This worked me in all browsers. jwplayer can conform if is HTML5 supported or not.

Or the below with forced HTML4 implementation:

<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
modes = [{type: 'flash', src: '[JWPLAYERBASEDIR]/swf/player.swf'}], //force flashplayer for video
image: "yourvideothumbs/videothumb.jpg", //poster image
file: "videos/jourvideo.mp4", //video file
height: "693", //set height in px
width: "388" //set width in px
});

And in setup you can set skin, controls, autostart anything you want:
http://www.longtailvideo.com/support/jw-player/28839/embedding-the-player/

Display controlbar only when mouseover - Jwplayer 7.1.1

While the update doesn't come with a plausible solution, we've got to make it work.

So, I did so:

var targetId = 'player';

$jwplayer(targetId).onReady(function(){

this.onPlay(callbackOnPlay);

});

var callbackOnPlay = function(){

var player = $('#' + targetId),
controlbar = (player.length) ? player.find('.jw-controls') : $('.jw-controls');

player.onPlay()

if (player.length && controlbar.length) {

//Delay 2s
setTimeout(function() {
controlbar.fadeOut();
}, 2000);

//Add hover event
player.hover(
function() {
controlbar.fadeIn();
}, function() {
controlbar.fadeOut();
}
);

}

};

How to start jw player automatically?

Basically:

<embed width="576" height="432" flashvars="&
file=kgalive&
streamer=rtmp://5.77.33.107/kga" wmode="opaque"
allowscriptaccess="always" allowfullscreen="true"
quality="high" name="player" id="player" style=""
src="player.swf" autostart="always"
type="application/x-shockwave-flash"/>

Needs to be:

<embed width="576" height="432" flashvars="&
autostart=true&file=kgalive&
streamer=rtmp://5.77.33.107/kga" wmode="opaque"
allowscriptaccess="always" allowfullscreen="true"
quality="high" name="player" id="player" style=""
src="player.swf" autostart="always"
type="application/x-shockwave-flash"/>


Related Topics



Leave a reply



Submit