jwplayer video not working in IE9 normal mode - javascript

I'm having a problem with JW Player which not working in IE9 normal mode.
When I try to play the video in IE9 normal mode, it display an error message like this;
Error loading media: File could not be played
But its working perfectly in IE9 compatibility mode and in other browsers.
My script is like this;
<div id="myElement">Loading the player...</div>
<script src="/jwplayer/jwplayer.js"></script>
<script>jwplayer.key="key="</script>
<script type="text/javascript">
jwplayer("myElement").setup({
width: '520',
height: '293',
playlist: [{
image: "/video/image.png",
sources: [{
file: "/video/video-640x360.m4v",
label: "360p",
width: '640',
height: '360'
},{
file: "/video/video-1280x720.m4v",
label: "720p",
width: '1280',
height: '720'
}]
}],
modes: [
{type: 'flash'},
{type: 'html5'},
{type: 'download'}
]
});
</script>
Is this is problem of flash player? Any suggestions ?
Please help me, Thanks and regards,
Arun

Related

jwplayer cannot seek video of google photo

I upload a video to google photo.
I use jwplayer to play video. but I can't seek video.
When I click to seek video, video is replay with start time 00:00.
This is my code
player = jwplayer("apicodes-player");
player.setup({
playlist: [
{ sources: [{
label: "360p",
type: "video/mp4",
file: "https://video-downloads.googleusercontent.com/AMfe5wrawK220JrFOrFTfUGIbTtgk_MNzkCa3xGjrNyqCPODbSRcnm8JYAginZRK3VRcEM46ogfCAQzG2n3aly0zn9JQKy0mWx5z1YeNfwsIlUZwh-w_UeTV1xfBiRj6Wt246t5xt1m_lEoL6Ed5W8vptAG4t-3QhG5jqFTdNMJUZWsX8vaBeW_AxM0LGYtihXYZm9r-7aki"
}]},
],
aspectratio: "16:9",
startparam: "start",
primary: "html5",
ga: {},
playbackRateControls: true,
autostart: false,
preload: "auto"
});
I tried demo with https://www.jwplayer.com/developers/player-event-inspector/ but it doesn't not working with seek and rewind.
Json input test is:
{
playlist: [{
sources: [{
label: "360p",
type: "video/mp4",
file: "https://video-downloads.googleusercontent.com/AMfe5wrawK220JrFOrFTfUGIbTtgk_MNzkCa3xGjrNyqCPODbSRcnm8JYAginZRK3VRcEM46ogfCAQzG2n3aly0zn9JQKy0mWx5z1YeNfwsIlUZwh-w_UeTV1xfBiRj6Wt246t5xt1m_lEoL6Ed5W8vptAG4t-3QhG5jqFTdNMJUZWsX8vaBeW_AxM0LGYtihXYZm9r-7aki"
}]
}, ],
"width": "50%",
"aspectratio": "16:9",
"autostart": false,
"controls": true,
"preload": "metadata",
"primary": "html5"
}
Please help me.
I have the same problem. I think this is because the Google Photos server does not support partial content responses. See HTML5 Video Tag in Chrome - Why is currentTime ignored when video downloaded from my webserver? and https://issuetracker.google.com/issues/111931138.
One option would be to download the video from your server and control de streaming yourself.

JWPlayer 6 playlist duration option

I was using JWPlayer 5, but right now moving to JWPlayer 6.
On JWPlayer support page you can see that playlist have time duration for each video, but I don't see duration in play list with a code below.
<script type="text/javascript">
jwplayer("summitplayer").setup({
height: 1080,
width: 640,
listbar: {
position: 'bottom',
size: 720
},
playlist: [
{ duration: 488, title: "My title #1", description: "Description #1", file: "file1.mp4", image: "file1.png" },
{ duration: 488, title: "My title #2", description: "Description #2", file: "file2.mp4", image: "file2.png" }
]
});
</script>
I am not afraid of using a particular skin or creating a skin for player, but I don't see the option for duration either.

Jwplayer player 6 for all device with onlick change src url variables

I would like to setup jwplayer with various streaming protocols, for flash/pc/mac and for html5 player for hls capable-device and at the end with a fallback link that that for old android and blackberyy device. That's working fine with a static code. But I would like to change dynamically the player scr onclick for different streaming quality.
I have this script (in the header also) to change dynamically the player source onclick:
<script type="text/javascript">
function changeVideo(filename1,filename2,filename3) {
jwplayer("myplayer").setup({
autostart: true,
autoplay: true,
width: 640,
height: 360,
aspectratio: "16:9"
playlist: [{
image: "/images/poster.jpg",
sources: [{
file: filenam1
},{
file: filenam2
},{
file: filenam3,
}]
}],
primary: "flash"
});
jwplayer('myplayer').load();
}
</script>
filaname1, filename2, filename3 are variables which listen to the html/js onchange fonction which also has 3 links separated with a "," .
And in the body I have this:
<div id="myplayer">Loading the player...</div>
//this is the default static player setup which is working fine
<script>
jwplayer("myplayer").setup({
aboutlink: "http://mywebsite.com",
autostart: true,
width: 768,
height: 432,
aspectratio: "16:9",
playlist: [{
image: "/images/poster.jpg",
sources: [{
file: "rtmp://servername-or-ip:1935/appname/streamname"
},{
file: "http://servername-or-ip:1935/appname/streamname/playlist.m3u8"
},{
file: "rtsp://servername-or-ip:1935/appname/streamname"
}]
}],
primary: "flash"
});
</script>
// here are the quality links to change dynamically onlick, with three links
<p><a class="button" href="javascript:void();" onclick="javascript:changeVideo('rtmp://servername-or-ip:1935/appname/streamname1,http://servername-or-ip:1935/appname/streamname1/playlist.m3u8,rtsp://servername-or-ip:1935/appname/streamname1');">Low Quality</a>
<a class="button" href="javascript:void();" onclick="javascript:changeVideo('rtmp://servername-or-ip:1935/appname/streamname2,http://servername-or-ip:1935/appname/streamname2/playlist.m3u8,rtsp://servername-or-ip:1935/appname/streamname2');">SD Quality</a>
<a class="button" href="javascript:void();" onclick="javascript:changeVideo('rtmp://servername-or-ip:1935/appname/streamname3,http://servername-or-ip:1935/appname/streamname3/playlist.m3u8,rtsp://servername-or-ip:1935/appname/streamname3');">HD Quality</a>
</p>
If there someone to help? that would be greatly appreciated.

Issue in playing Pre-roll ads in Jwplayer 6 Html5-video tag

I am using Jwplayer 6 Ad version for both flash as well as html5 player where
flash player is working fine as well as pre-roll ads are coming but IOS/Android devices support Html5 player where pre-roll ads are displaying.
Player Configuration Support Link: http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/22644/using-the-html5-video-tag/
Issue: Pre-roll ads are not coming while playing videos on various IOS/Andriod devices in html5 player.
<script src='/jwplayer/jwplayer.js'></script>
<div id='vidShow' style='text-align:center'></div>
<video height='388' width='658' id='vidShow' autoplay autobuffer controls>
<source src='$videoURL' type='video/mp4'></video>
<script type='text/javascript'>
jwplayer.key='ZntNkhG6CqNXBkJnV4sYqVjYopC38oGcp0GjCQ==';
jwplayer('vidShow').setup({
modes: [
{ type: 'html5' },
{ type: 'flash', src: '/jwplayer/jwplayer.flash.swf' },
advertising: {
client: 'vast',
schedule: {
myPreroll:
{
offset: 'pre',
tag: 'http://xp1.zedo.com/jsc/c2/fns.vast?n=2135__amp__c=121/102__amp__d=22__amp__s=1__amp__v=vast2__amp__pu=__page-url____amp__ru=__referrer____amp__pw=__player-width____amp__ph=__player-height____amp__z=__random-number__'
}}}]
});
</script>
Use... JW PLAYER v6.8+ (Working)
<div id="mediabox_video" style="width:100%; height:100%;">Loading...</div>
<script type="text/javascript">
jwplayer("mediabox_video").setup({
width: '100%',
height: '100%',
autostart: true,
playlist: [{
sources: [
{bitrate: "360", file: "http://110.164.180.149/video39/1930daa7bced9bcbfb8131af6e8a34fb/5320014b/2014/03/11/1394544732/1394544732_360.mp4", label: "360p", type: "video/mp4", provider: "video"},
{bitrate: "480", file: "http://110.164.180.149/video39/bf9b55c3f9c3b71291e3c09aff6ba4ae/5320014b/2014/03/11/1394544732/1394544732_480.mp4", label: "480p", type: "video/mp4", provider: "video"},
]
}],
advertising: {
client: "vast",
schedule: {
adbreak1: {
offset: 'pre',
tag: 'http://xp1.zedo.com/jsc/c2/fns.vast?n=2135__amp__c=121/102__amp__d=22__amp__s=1__amp__v=vast2__amp__pu=__page-url____amp__ru=__referrer____amp__pw=__player-width____amp__ph=__player-height____amp__z=__random-number__'
}
}
}
});
</script>

Why are black squares appearing in Chrome?

I'm developing an application in ExtJS 4.2.0 and using Chrome as my development browser. I've noticed that when I hide dropdown menus black squares appear in their place. I'm assuming this isn't supposed to happen! Has anyone else experienced this?
I'm using ExtJs 4.2.0 and Chrome 27.0.1453.94 m.
Thanks!
UPDATE
After some investigation I've found that it happens when using ExtJS in conjunction with the Javascript Infovis Toolkit (http://philogb.github.io/jit/). I've managed to recreate the problem reliably here:
<html>
<head>
<title>Black Box Experiment</title>
<script type="text/javascript" src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
//some data to put in the chart
var data = {
"name": "Test1",
"data": {
"id": "1"
}
};
//Create a new ST instance
var st = new $jit.ST({
injectInto: 'infovis',
duration: 0,
levelDistance: 50,
orientation: "top",
Navigation: {
enable:false,
panning:true
},
Node: {
height: 30,
width: 150,
autoHeight: false,
autoWidth: false,
type: 'rectangle',
overridable: true
},
NodeStyles: {
enable: true,
stylesHover: {
'color': '#dd3333'
},
duration: 700
},
Edge: {
type: 'bezier',
overridable: true
}
});
//load json data
st.loadJSON(data);
st.compute();
//emulate a click on the root node.
st.onClick(st.root);
//create our extjs panel for the buttons
Ext.create(Ext.panel.Panel,{
title: "Test panel",
width: 300,
height: 100,
items: [
{
xtype: 'button',
text: 'Open/Close Menu',
menu: [
{text: 'button 1'},
{text: 'button 2'},
{text: 'button 3'},
{text: 'button 4'},
{text: 'button 5'},
{text: 'button 6'}
]
},
{
xtype: 'button',
text: 'Click to open an alert - a black square will appear',
handler: function(){
Ext.Msg.alert("Test","A black box should now be appearing where the menu button is.");
}
}
],
renderTo: Ext.getBody()
});
});
</script>
<div id="infovis" style="width: 300px; height: 300px; margin: auto; overflow: scroll; border: 1px solid black;"></div>
</body>
</html>
In the example above, take the following steps to recreate the problem:
1. Click on the "Open/Close Menu" button twice (once to open, once to close)
2. Click on the "Alert" button. A black box should appear in the position of the menu that we've just closed.
Does anyone else see this?
We had this exact same problem. It seems to be a (Windows only) Chrome bug relating to the the visibility: hidden css rule Ext uses by default to hide the dropdown.
A workaround is to change the css hide technique in the menu config:
{
...
menu: {
items: [
...
],
hideMode: 'display'
}
}
Im going thru the exact same thing with Ext js 4.0.1
Other browsers than Chrome behave as expected.
Thanks for the workaround.
To apply this fix to all menus, rather than having to set it individually, you can just override the Ext.menu.Menu class:
Ext.override(Ext.menu.Menu,{
hideMode: 'display'
});
This completely solved the problem for me, as there were actually a lot of menus affected by this.

Categories