Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

JW player not working with video tag


I am trying to embed <video> tag of html5 and jw player, but it is giving me following error:
Error loading player:
No playable sources found

Here is my snippet code:
<script src="jwplayer/jwplayer.js"></script>

<video loop width="500" height="360" id="myVideo">
<source src="video/1483.mp4" type="video/mp4">
</video>

<script type='text/javascript'>
jwplayer("myVideo").setup({
repeat:true
});
</script>

And i am using jwplayer 6, so it takes jwplayer.flash.swf file from the location same as my jwplayer.js file.

Even if i use jwplayer 5 and give address of .swf file explicitly, i am getting the same error.
jwplayer("myVideo").setup({
modes: [
{ type: 'html5' },
{ type: 'flash', src: '../js/external/jwplayer_/jwplayer.flash.swf' }
]
});

FYI, the file 'video/1483.mp4' works if i use only <video> tag. However, if i use jw player with it, i am getting this error.

45 Community Answers

JW Player

User  
0 rated :

I also tried with 'bunny.mp4' video. But no success.

JW Player

User  
0 rated :

JW Player 6 does not use the <video> tag. That's not how you embed the video. Please refer to the embedding guide:

http://www.longtailvideo.com/support/jw-player/28839/embedding-the-player

JW Player

User  
0 rated :

Ok!! Thanks.

But i have also tried above code with JW player 5. Still it is giving me same error.
I referred to below snippet from this link:

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/22644/using-the-html5-video-tag/

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

<video height="270" width="480" id="myVideo">
<source src="/static/bunny.mp4" type="video/mp4">
<source src="/static/bunny.webm" type="video/webm">
</video>

<script type="text/javascript">
jwplayer("myVideo").setup({
modes: [
{ type: 'html5' },
{ type: 'flash', src: '/jwplayer/player.swf' }
]
});
</script>


JW Player

User  
0 rated :

Why are you trying to use a <video> tag at all? JW Player 6 will determine whether or not the browser can handle HTML5 playback, and will actually create the <video> tag "on the fly," invisibly. If the browser can't do HTML5, the player pulls up its Flash script and displays the video that way.

Why aren't you just using the player the way it's designed to be used?

JW Player

User  
0 rated :

Ok! i got you. But there is a reason why i want to use <video> tag.

When i use video tag and use a file from server as a source, while it loops it plays from cache, so there is now issue like waiting for buffer every time it loops back and start playing.

However, when i use JW Player and file is somewhere stored in server. So when we use
'repeat : true,'
it loops back and play again. But the problem is that every time it goes to fetch from server. It doesn't play from cache. So when video loops back to play again we have to wait, while it buffers.

Ethan Feldman

JW Player Support Agent  
0 rated :

You could always use our API, stop 1 second before the duration, then seek back to 0, that way it won’t try to always re download the file. – http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference

JW Player

User  
0 rated :

Whooh!!!
But than i will miss my video for 1 sec. I won't be able to see last 1 sec. And my videos are only of 4-5 secs, so 1 sec will mean a lot.

I have gone through all API of JW Player and tried it before:

bc.. jwplayer("myVideo").onTime(function(){
if((jwplayer("myVideo").getDuration() - jwplayer("myVideo").getPosition()).toFixed(1) == 0.3)
jwplayer("myVideo").seek(0.4);
});



above code costs me 0.7 seconds.

Ethan Feldman

JW Player Support Agent  
0 rated :

If the files are only 4-5 seconds, why are you concerned about bandwidth with such small files being re-downloaded?

JW Player

User  
0 rated :

Because when it is re-downloaded, it takes some time to buffer before getting played, which is very annoying. And also it is one of the requirement.

Ethan Feldman

JW Player Support Agent  
0 rated :

Then the only work around is the seeking / oncomplete option.

JW Player

User  
0 rated :

Yeah. I used onBeforeComplete and seek option. And it is working fine in all browser across windows and mac platform, except this two combination:
1) safari on windows.
2) Firefox on mac.

As they might be using flash to play the videos, seek(0) is not playing from cache but getting it again from server.
This two combinations are only remaining. All others are working perfectly.

JW Player

User  
0 rated :

I wouldn't even bother testing Safari for Windows. It's a dead browser, abandoned by Apple (they haven't touched it in a year-and-a-half), and used by virtually no one.

Interesting side-note: Apple's "iCloud bookmark sync" works for IE, Chrome, and Firefox on Windows, but doesn't work with Safari for Windows! That tells you a lot about the future of Safari for Windows, the browser that not even its mother can love. ;)

Ethan Feldman

JW Player Support Agent  
0 rated :

Yeah, I would not bother with Safari on Windows, not enough people use it to make it work it.

JW Player

User  
0 rated :

Ok. But we need to make it work for firefox on mac.

Ethan Feldman

JW Player Support Agent  
0 rated :

In Firefox on my Mac Mini at home, it plays. FF 25.

JW Player

User  
0 rated :

Seriously @Ethan sometimes your protruded/irrelevant answers are painful to observe...

Maybe re-read the thread before wheeling out a standard one-liner?!

Ethan Feldman

JW Player Support Agent  
0 rated :

Ehrm, I meant that is worked as expected on my Mac with Firefox. Not that it played.

JW Player

User  
0 rated :

bc.. In Firefox on my Mac Mini at home, it plays.



So it does what Karan was asking - Play > Complete > Seek to 0 > (no buffer) > Play?

bc.. ...worked as expected on my Mac with Firefox. Not that it played.



Or not?! What do you subsequently mean by "as expected"?

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes, that works on my Mac Mini.

Play > Complete > Seek to 0 > (no buffer) > Play

JW Player

User  
0 rated :

Hi Ethan,

I tried before and after reading your comment i tried once again to play videos in FF(ver 25) on macmini. I tried both APIs: "onComplete" & "onBeforeComplete". It is not playing video from cache when it auto-loops. It is not auto-looping smoothly. Below is the snippet of code:

bc.. <div id = 'myVideo'></div>
<div id = 'myVideo1'></div>
<script type='text/javascript'>
jwplayer("myVideo").setup({
file: 'http://www.longtailvideo.com/jw/upload/bunny.mp4',
type: 'mp4',
width: 500,
height: 360,
repeat: true
});

jwplayer("myVideo").onComplete(function(){
jwplayer("myVideo").seek(0);
});

</script>
<script type='text/javascript'>
jwplayer("myVideo1").setup({
file: 'http://www.longtailvideo.com/jw/upload/bunny.mp4',
type: 'mp4',
width: 500,
height: 360,
repeat: true
});

jwplayer("myVideo1").onBeforeComplete(function(){
jwplayer("myVideo1").seek(0);
});

</script>

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes, it is not 100% smooth since it is cutting out earlier than the end of the video, but it does not break.

JW Player

User  
0 rated :

It is not cutting out any part. Whole video is getting player from start time to end time. And when it loops back and Full video is loaded and plays.
So whats the solution for FF on mac to loop smoothly?

Ethan Feldman

JW Player Support Agent  
0 rated :

For me it does not do that. It does not re download the video. I am using FF 25 on OS X Mavericks. You might have to do some additional userAgent detection and use some slightly different JS for Firefox though if you are having an issue.

JW Player

User  
0 rated :

Hi Ethan,

Mac version we are using is MAC OS X 10.8.5. And Firefox version 25. And JW Player version 6.7.4071. Video is downloaded every time it plays.

One more thing. Is seek backward option available/enable for flash in JW Player 6?

JW Player

User  
0 rated :

I also tried in Mac mavericks version with FF version 25. It is still buffering for me.

Ethan Feldman

JW Player Support Agent  
0 rated :

There is not a seek backward option I’m afraid. Odd, maybe the issue is video card driver based?

JW Player

User  
0 rated :

I tested in 3-4 Mac pc. I don't think every machine can have that issue.

Ethan Feldman

JW Player Support Agent  
0 rated :

I wonder if having a webM as well and running in html5 mode makes a difference. Or the Flash version you are using?

JW Player

User  
0 rated :

I installed latest flash version. I also tried with the bunny.mp4 video downloaded from your site. But the result is same.

Ethan Feldman

JW Player Support Agent  
0 rated :

Does it happen in html5 mode for firefox? You can try with – http://www.longtailvideo.com/jw/upload/bunny.ogv, to test.

JW Player

User  
0 rated :

I know i could have test with ogv file. But we have to make it work with mp4 file only

Ethan Feldman

JW Player Support Agent  
0 rated :

I was just wondering if the issue happens in html5 mode for you, that was all I wanted to test.

JW Player

User  
0 rated :

Sorry i am not getting why are you concerned about HTML5 mode, when we have used JW Player to play video. And HTML5 video tag won't work with FF on Mac, you have to use object and embed tag to make it work.

Ethan Feldman

JW Player Support Agent  
0 rated :

I just wanted to see if the issue with the loop happens in both flash and html5 modes, so we could further narrow down when the issue happens, it was just to test.

JW Player

User  
0 rated :

Hi,

It is working fine in HTML5 mode. I tested it in FF, chrome on windows. I believe it happens with flash mode.

Ethan Feldman

JW Player Support Agent  
0 rated :

So using:

jwplayer(“myVideo”).onTime(function(){
if((jwplayer(“myVideo”).getDuration() – jwplayer(“myVideo”).getPosition()).toFixed(1) == 0.3)
jwplayer(“myVideo”).seek(0.4);
});

Works in HTML5 mode, but not Flash, in FF only Mac only ?

JW Player

User  
0 rated :

Not the above code.

Following code works in HTML5 mode, but not in Flash mode.

bc.. <script type='text/javascript'>
jwplayer("myVideo1").setup({
file: 'url',
type: 'mp4',
width: 500,
height: 360,
repeat: true,
controlbarseekable:'backwards',
modes: [
{
type: 'flash',
src: 'url'
},
{
type: 'html5',
config: {
provider: 'http',
file: 'url'
}
},
{
type: 'download',
config: {
file: 'url'
}
}
]
});

jwplayer("myVideo1").onBeforeComplete(function(){
jwplayer("myVideo1").pause(true);
jwplayer("myVideo1").seek(0);
});

</script>




This code as well as below code works in HTML5 mode but not in flash mode:


bc.. <script type='text/javascript'>
jwplayer("myVideo").setup({
file: 'url',
type: 'mp4',
width: 500,
height: 360,
repeat: 'true',
controlbarseekable: 'backwards',
provider: 'http',
controls: 'true'
});

jwplayer("myVideo").onBeforeComplete(function(event){
jwplayer("myVideo").pause(true);
jwplayer("myVideo").seek(0);
});
</script>

JW Player

User  
0 rated :

And by saying that
'it works in HTML5 and not in Flash mode'
i mean:
it loops smoothly in HTML5 mode but not in Flash mode.

Ethan Feldman

JW Player Support Agent  
0 rated :

Can you remove:

controlbarseekable: ‘backwards’,
provider: ‘http’,

These are not valid jw6 variables. controlbarseekable has never been a jw configuration option.

JW Player

User  
0 rated :

Ok. I removed but no change.

Ethan Feldman

JW Player Support Agent  
0 rated :

Also remove:

modes: [
{
type: ‘flash’,
src: ‘url’
},
{
type: ‘html5’,
config: {
provider: ‘http’,
file: ‘url’
}
},
{
type: ‘download’,
config: {
file: ‘url’
}
}
]
});

There is no modes block in JW6 at all – http://www.longtailvideo.com/support/jw-player/28834/migrating-from-jw5-to-jw6

JW Player

User  
0 rated :

Removed. No change yet.

Ethan Feldman

JW Player Support Agent  
0 rated :

repeat: true, is also not needed either since you are using the api to do this.

JW Player

User  
0 rated :

Removed. No change yet. Can you please list down all change at once?

Ethan Feldman

JW Player Support Agent  
0 rated :

Can I see where the latest version of the code is running ?

This question has received the maximum number of answers.