I'm displaying multiple videos on a page on http://louistocchet.com/commercials/ using EasyHtml5Video (http://easyhtml5video.com/) and only the first video's poster image is showing in IE9 (on Win7 64 bit). I've done a lot of searching and I've added preload="none" to the video tags to no avail. I've also changed my doctype to the html5 doctype. I've also tried making the poster image the background on the video tag, which also did not work for me.
Turns out the jScrollPane plugin conflicts with the video tag in some respects in IE9. Not running the embedded jScrollPane script in the head in IE9 solved the problem.
Related
I am doing a project where I have to display video using Flash OSMF player. Also I have to display some text and image on top of the player.
It's working pretty cool in chrome and IE. When it comes to Firefox and safari the text element is hiding behind the video player. I have z-index CSS property to make it to the front but no luck it's still hidden in the background .
I have a live site http://www.tallenge.com/alcy-caluamba/all-categories1/general23/lecrae-i'm-turnt--choreography-by-alcy/vote
Since it is not working in Firefox I have changed the player only for Firefox and safari to html5 player in live site, so that it is displaying text as expected. For testing you can take player code(under medidplayer element) from chrome and replace it in Firefox - you will get the issue I have mentioned above.
Any help/suggestion would be greatly appreciated .
Thanks in advance ...
This problem can be related to the wmode setting of the Flash player object, see the Adobe documentation of this setting:
https://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html#main_Using_Window_Mode__wmode__values_
You can try using wmode="opaque" as a param of the Flash object:
<param name="wmode" value="opaque"/>
However according to the Flash docs in that mode the plugin is not able to take advantage of hardware acceleration.
Unrelated question, if you already used the HTML5 video tag as a fallback for Firefox, why Flash? I'll take the opposite direction HTML5 video tag by default, Flash as a fallback for old browsers.
I'm using the HTML5 video tag to play a short video on my website with this code:
<video width="100%" poster="/images/video_preview.jpg">
<source src="/images/movie.mp4" type="video/mp4">
<source src="/images/movie.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>
The video's are shown but when I'm on my website in Google Chrome the colors look a little bit more purple then they should be and on Internet Explorer the whole video got a darker look. I also have a preview image as you can see in my code and that image is now a different color then shown on the browser and that's not what I want. I noticed that for example Apple also uses the <video> tag but they have no color difference between browsers.
How is this possible? I'm using the same code for all browsers. Is this because of the rendering of all the browsers?
How can I fix this? Thanks.
ADDED BOUNTY
Is there anyone that had the same issue with video rendering in browsers and can help me fix this issue? Still haven't figured out why the same video file is shown darker in Internet Explorer and with a purple glow in Google Chrome.
The page is online so you can see the difference here.
How is this possible?
About the video
Do not expect 100% the exact same behavior from browsers, especially not colors and video. Display inconsistency is expected between different browsers (and especially different systems).
Different browsers might use different software implementations of h264 decoder, different video enhancement plugins, etc.
This is not a problem with your source or anything you can forcefully fix.
The preview image
This is something you might be able to fix. The image is maybe saved in a certain color profile which isn't supported by both browsers or they simply render differently.
When saving an image the safest way is to always select "save for web & devices", which is a sRGB profile. Check your photoshop or image editor settings if needed.
Different browser will have different implementation of certain things. Especially IE. However, I have never heard of this happening. If you have CSS code or any JavaScript code effecting the video element can cause this. It must be with the way the browsers differing ways of rendering the image.
You can try to reimplement the poster function through JavaScript. Have it draw and image. When that image is clicked have it remove the image and draw the video in its place.
As stated above, it's to do with how the browser renders the video on its video panel - something that's difficult to change. You could try re-encoding the video and altering the colours that way to see if that changes anything.
i ran into a similar issue with Google Chrome and youtube videos. In Chrome my video had a yellow tint to it while in Firefox the video was fine. I managed to remove the color distortions in Chrome by doing the following:
In Chrome's url bar, enter "chrome://flags"
enable the "Override software rendering list" flag
This obviously won't affect how other viewers see your videos, but at least you get to see it correctly...
I had the same problem. Try to render mp4 video with "601" colorscope. This should help.
EDIT: Safari = no proper webM support. Safari quite popular I hear. Have to use giant gifs... 🧐🤦♀️🤷♀️
Came across this issue several times, very annoying, no proper solution, so I ended up using transparent background video!
.webm video format allows transparency 🥳(way smaller and higher res than .gif or .apng) https://web.dev/replace-gifs-with-videos/
If you have a transparent .mov, you can convert it to .webm using ffmpeg (Handbrake seems to remove the alpha channel)
Something like this:
ffmpeg -i video-in.mov -c:v libvpx -pix_fmt yuva420p -auto-alt-ref 0 video-out.webm
^ webm video currently not playing in safari, "Safari only supports VP8 used in WebRTC." https://caniuse.com/webm,
https://webkit.org/blog/8672/on-the-road-to-webrtc-1-0-including-vp8/. No idea what that means in practice, any help in comments appreciated 💚
ffmpeg command src: https://superuser.com/a/624564/787069
I'm building a simple page to display videos uploaded from my iphone using the html5 video tag.
if you're watching it with chrome you probably see this video is presented horizontal, although it's not- try to download it or watching it from safari (haven't tried another browsers).
I havne't found anything on the net mention this problem, is it a known chrome bug? does this tag any attribute that I can change to display it properly?
Thanks.
Edit:
looks like this also happen in IE
you could use style="-webkit-transform: rotate(90deg);" on the video tag along with a html5 compatible video player solution (otherwise you get rotated controls as well)
It's an encoding issue from iPhones. I downloaded the video and it was still displayed horizontally using mplayer. There is more information here:
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
and as suggested you'll need to re-encode the videos using a library that uses a more supported standard encoding. (Or try to transform the video, on the page but that would be ugly)
I am developing a website in XHTML 1.1/CSS 3.0 and I have a problem with Internet Explorer 9. Each time I change pages from "Home" to "Features" various images flash 'white' before filling in. This 'white flash' occurs each time the page is changed. I have seen numerous stack overflow posts discussing such errors but they seem to be for older versions of IE. The site looks fine in Chrome.
Here is what I've tried so far --
ran XHTML through validator (it passes).
ran CSS Level 3 validator (it passes).
tried setting background color to black.
tried changing CSS include format to import and back again (per previous stack overflow suggestion)
moved from HTML/XHTML Transitional to XHTML Strict
commented out images to identify a specific image or div -- seems that most of them do it.
tried empty Script tag hack (for flash of uninitialized content bug in IE)
tried adding meta tags to change cache settings so browser uses cache.
tried various IE browser-specific meta tags suggested for IE6, IE7, IE8 to try to 'fix' the behavior.
Any thoughts on what I can try next?
Thank you!
The flashing could be a side effect of having multiple layers of background images, including the shadow layer which stretches to fill the viewport. I'd try disabling those effects and seeing if that helps. Who knows how that might be affecting IE drawing the page...
You might find that putting gradient.png on #innerContent instead of #content makes more sense, and in doing that, you you won't need to use multiple BG images on a single element.
I have a site that is having doctype html4 standard. We need to run videos of your site in ipad and we are willing to put in video tag into it to support video play into ipad. Do we need to change the doctype to html5 will it create problem in existing code. Like in css box model etc. We are supporting ie7 mozilla 3+ and chrome.
You don't have to have the HTML5 doctype to use the video tag.
It will depend on the browser how it chooses to handle it.
For example, here's a page with the video element using HTML4 doctype
view-source:http://www.longtailvideo.com/support/jw-player/jw-player-for-html5/11895/single-mp4-video
However, it renders fine in my Firefox. Try it on your browser of choice.
Shouldn't be a problem as previous content will still work as expected. I say update the doctype