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)
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 am using JWplayer 6.
I need to force it to use HTML5 even if HTML5 is not supported (this is for RESTing purposes).
I cannot figure out how to accomplish this.
I have tried setting jwplayer("playername").settings({primary: "flash"}) - it didn't work.
Right now I am resorting to disabling flash in browsers but not all browsers/devices allow this without addons.
I am using (player).getRenderingMode to determine the playback type so I am absolutely certain that only flash is being played.
Any help is appreciated!
UPDATE:
I have the primary: "flash"/"HTML5" setting working in every browser except Safari.
According to W3C schools Safari DOES support mp4 files in HTML5 mode.
So my question is now how to force Safari to play in HTML5 mode
I have a HTML5 video, working fine, and i'm happily smiling whenever i start my browser... However!
I know the Video tag isnt supported by some browsers, but i noticed there is a difference in support for video attributes/methods/whatever too. Is there a summary of this somewhere?
For example:
The poster attribute doesnt work in every browser, even if the vide DOES work!
I think its pretty worthless to just use an entire javascript library to take care of one attribute like poster, so how to take care of this?
Or am i completely wrong, and is IF video is supported, also every attribute supported the same way?
Please help me! :)
Thanks for all your advice,
WK
ps: I am using the video for everybody variant of the video. So thats working fine.
Is this the kind of thing your after?? click me.
Basically there is the following support for the HTML5 video tag:
Every modern browser that has support for HTML 5 supports <video>
meaning: IE9+, FF3.6+, Chrome, Opera, Safari
Internet Explorer 9 does not support the poster attribute. I believe
there is even a bug about this on Microsoft connect.
Firefox does not support the loop attribute. (replaying a video after it has finished)
Different browsers support different video formats, IE9 supports
H.264, Firefox supports ogg (Theora) and WebM etc, which means that you would need to provide all formats in order to be compatible with all browsers.
The rest is pretty much supported everywhere.
well, HTML 5 is not yet standardized. Due to this, every browser that support html5 works differently. As far video tag is concerned then you have to provide with different formats so as to get support on various browser list. You can test browser support on this site. Here you can get all the details about the extent your browser support to HTML5
I find this page a good resource (although it is starting to get old as it was earlier this year): http://www.longtailvideo.com/html5
On a separate note, I find if you go to mobile devices such as Android the browser support varies greatly per device. Even though they are "supported" I always get strange behavior.
As for poster, there is no good solution if you want to have support across all browsers.
I'm trying to place html elements over a flash video which must be rendered with wmode="direct" (video occupies entire window with html UI to be laid over it, anything other than direct makes CPU usage surge).
I've tried using an iframe to include the flash video, but I'm still unable to place any elements over it. Is there a workaround to achieve this?
According to Adobe's wmode browser support matrix, all major browsers at current versions on Mac already support this use case. On Windows support is spotty, only IE 9+ is claimed to work.
Like you, I'm trying to find out if/when Adobe plans to extend HTML overlay support for wmode=direct in Windows browsers. The linked page only talks about Chrome up to 10 and FF up to 4, so more progress may have already been made since the doc was last updated.
If I find out something useful I'll add it to this answer, until then it's probably safest to assume you need IE 9+ on Windows to support direct+overlay.
We are finding that most browsers support HTML overlay when wmode="direct" - however no browser is able to support transparency overlayed on top of the flash. Not even PNGs can alpha blend correctly. Any pixels that have an alpha channel and ignore as if there was no pixel at all.
When creating UI to layer over the top of flashs we have to "blanket out" the SWF - or - use rectangular DOM elements (ie, no rounded corners)
Furthermore - IE 9 on Windows 7 and older version simply fail to overlay anything over the flash. Iframes seem to pierce the SWF, but HTML elements do not.