Suddenly in some browsers there is no picture shown of the videos anymore

Suddenly in some browsers, e.g. Chrome, Opera, there is no picture of the videos anymore, the sound works. In Firefox and Internet Explorer the video picture is shown.

How could I make it work?

<P class="grossbild">

<video class="hide-in-ie8" controls="true" height="480" width="640">
   <source src="video.m4v" type="video/mp4" />
   <source src="video.mp4" type="video/mp4" />
   <source src="video.ogv" type="video/ogg" />
 </video>
 <br><br><br><br>
<p>
<!--[if lt IE 9]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
      height="480" type="application/x-shockwave-flash" width="640">
   <param name="movie" value="player.swf" />
   <param name="flashvars" value="file=myvideo.flv" />
   <param name="allowfullscreen" value="true" />
   <param name="allowscriptaccess" value="always" />
   <img src="myvideo.png" alt="Alternatives Bild" width="639" height="452" /></a>
</object>
<![endif]-->

Code (markup):

 

Does your m4v have crApple DRM on it, if so it's invalid in some browsers for video/m4v and you need to use video/x-m4v instead on it so that browsers that can't do that new format fall back on your older mp4 file.

It also makes NO sense for you to have multiple <source> with the same type, the latter ones will NEVER be used. I would suggest perhaps dropping the m4v if you have perfectly good MP4, the bandwidth difference isn't THAT big and it has less compatibility woes.

Your object fallback probably also belongs inside <video> not after it, with a non-IE version of the opening <object> tag as well just in case. I also suggest you drop the pointless XML closures since you're clearly using HTML 5. I used to be a fan, but now they're just a waste of time, effort, and bandwidth.

 

Thank you very much!

I changed it (respectively tried to correctly change it) like you told me:

<video class="hide-in-ie8" controls="true" height="480" width="640" type="video/mp4">
   <source src="video.mp4"/>
</video>
<br><br><br><br>
<p>
<!--[if lt IE 9]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
      height="480" type="application/x-shockwave-flash" width="640">
   <param name="movie" value="player.swf" />
   <param name="flashvars" value="file=myvideo.flv" />
   <param name="allowfullscreen" value="true" />
   <param name="allowscriptaccess" value="always" />
   <img src="myvideo.png" alt="Alternatives Bild" width="639" height="452" /></a>
</object>
<![endif]-->

Code (markup):

I just at first saw this (before I did the entire correction), at the end mp4, the wrong type. I have replaced it with m4v, that would have worked.

changed to

I have removed the 2 soucres:

<video class="hide-in-ie8" controls="true" height="480" width="640">
   <source src="video.mp4" type="video/mp4" />
</video>

Code (markup):

Sorry, I do not know, this is one of the videos:

Very many thanks again!

 

You didn't need to -- and probably shouldn't have -- removed the ogg vorbis one. I should have been more clear on that. It doesn't make sense to have more than one type="" where the type is the SAME, as in video/mp4. It DOES make sense to have multiple ones where the type is DIFFERENT, such as type="video/mp4" and type="video/ogv". Not all browsers support the same formats, though that's changing as we move forward.

I would suggest TRYING:

   <source src="video.m4v" type="video/x-m4v">
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg">

Code (markup):

If that still provides no video but you get audio, remove the first source. M4V support in-browser is still kind of an Apple-only thing, which is why they added their own mime-type for it.

Still, good to hear you made progress with it.

 

Thank you!

Ah, sorry for misunderstanding.

This does show a picture in Chrome and Opera:

   <source src="video.m4v" type="video/x-m4v">
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg">

Code (markup):

This does:

   <source src="video.m4v" type="video/m4v">
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg">

Code (markup):

And this does also, so as you suggested I did and left it like this now:

   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg">

Code (markup):

Sorry, I do not quite understand, is this correct (I have copied type="video/mp4" to:

<video class="hide-in-ie8" controls="true" height="480" width="640" type="video/mp4">
<source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg">

Code (markup):

Strange, why is it that the ogg is different from ogv? Why is the extension ogv instead of ogg for the video? That is correct?

 <source src="video.ogv" type="video/ogg">

Code (markup):

Many thanks again!

 

mime-types are not file extensions, they are something different. Some in fact some mime-types represent many DIFFERENT file extensions. For example both plaintext and HTML are typically sent as text/plain.

OGV stands for "ogg vorbis" -- since the mime-type has type/family as its structure already saying 'video' you don't say it again. Ofher file types may come in the future that use a different extension but the same mime-type.

Ogg can be many different data types and extensions -- ogv is USUALLY video, oga is USUALLY audio, but that's not a hard fast rule. .ogg can be either, and .opus whilst having a really different file extension is usually sent with the mime-type audio/ogg.

It works the other way too. For example webM can be video only, audio only, or video + audio. If it has video it's video/webm, if it's audio-only it's audio/webm -- even though they both share the same file extension.

... and no, you do not set type on the video tag. That SHOULD be doing nothing.

-- edit -- oh, and this one:
<source src="video.m4v" type="video/m4v">

is probably doing nothing, there is no such mime-type as video/m4v, so it's ignoring that and trying the next one.

that's what <source> tags do. The browser checks the mime-type to see if it is a supported format for the browser (since each browser has formats they do and do not support). If it is supported, it uses that one and ignores the rest fo the <source>s states. If it isn't, it tries the next one, then the next one, until it gives up.

Which is why your <object> fallback to flash should be INSIDE the <video> tag not after it as the last resort fallback/drop-through.

 

Thank you!

Sorry, I made a mistake, I meant: this does not show a picture in Chrome and Opera:

  
<source src="video.m4v" type="video/x-m4v">
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg">

Code (markup):

Very difficulty those different types of mimes

Did I understand it correctly, so finally I have it like that, is that correct (sorry for my bad understanding):

  
<video class="hide-in-ie8" controls="true" height="480" width="640">
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg">

Code (markup):

 

That's mostly right, but since video and source don't exist as tags in IE8/earlier, there is PROBABLY no reason for that 'hide-in-ie8" class. You'll just have an empty inline-level holder meaning most layouts will just ignore it.

This would likely be the proper/full code you should be trying to use:

<video controls="true" height="480" width="640">
	<source src="video.mp4" type="video/mp4">
	<source src="video.ogv" type="video/ogg">
	<!--[if IE]>
		<object
			type="application/x-shockwave-flash" 
			classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
			height="480" width="640"
		>
	<![endif]--> 
	<!--[if !IE]>--> 
		<object 
			type="application/x-shockwave-flash" 
			codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
			height="480" width="640"
			data="player.swf" 
		> 
	<!--<![endif]--> 
		<param name="movie" value="player.swf">
		<param name="flashvars" value="file=myvideo.flv">
		<param name="allowfullscreen" value="true">
		<param name="allowscriptaccess" value="always">
		<img src="myvideo.png" alt="Alternatives Bild" width="639" height="452">
	</object>
</video>

Code (markup):

Everything inside <video> is a list of fallbacks, is the first source supported? yes, use it and done. No, try the next source, then the next. Out of sources, try the next tag inside it. Whatever comes after your sources inside <video> is only shown/used when all the sources fail, or if the browser doesn't support <video> and <source>

I changed up the IE CC so that non-IE legacy browser support works too. It's a rare occurance you really need it, but there's no harm in including it. Redone this way, whatever you were doing to 'hide in IE8" is no longer needed. By placing it inside <video> after <sources> it will only get used when it needs to be used. It needs two versions of that <object> opening since IE kind of needs that classId rubbish which screws up other older browsers, whilst other older browsers use the data="" attribute which is ignored by IE.

I'd have posted that sooner, but I was on the laptop out and around earlier, wanted to get back to the workstation first so I could cross the i's and dot the t's... or... uhm... you know.

Oh, and don't sweat it if you're not quite getting this right away -- IMHO even with the <video> tag (that is actually redundant to <object> and shouldn't even exist in the first place) it's still a poorly documented convoluted mess.

 

Thank you very, very much for the complete code. Yes, works perfectly.

Alright, I understand.

Thank you very much for changing up that.

Yes, yes, of course, thank you very much, it was early enough, I am very happy about it.

Ok, but actually I have to sweat, it is very hard to get it.

Very many thanks again!