Video don't open on browser of cell phone - javascript

(Using WordPress 4.7.3)
I have a video on my header background and it runs normally in the browser on desktop but when I open the browser on a cell phone, the video disappears. I checked the media queries in order to know if it is the problem, but apparently not.
Site URL: http://ratts.herokuapp.com/
Any idea what it is?

If you are talking about the video on the background, it won't work.
The only way to autoplay videos on mobile devices is to ditch the html video tag.
If you don't need audio:
Use a gif instead of the video. Depending of the animation, the file size will skyrocket though
Use a really long jpg or png that contains every frame of the video and then shift through them with javascript
Decode the video with javascript. For example use this h.264 decoder and play videos with good compression. Only downside I see is that it requires quite some CPU for the decoding.
Here's a similar question:
HTML5 video background on iPad/iphone

Related

I want to implement a video file on my Webpage (Wordpress) and making it responsive in terms of file size, to decrease loading times

I'm looking for the best way to embed a video file on my website.
What do i have to consider to make it fast?
Do i have to load up different video files (size and format) and let e.g. JS pick the right one depending on screen-size? Or is the browser doing this automatically?
Do you have some example code lines for me?
Thanks
If you leave the video tag without a source, you can then inject the source based on the screen size (e.g. 720p for smaller screens 1080p for bigger screens). Of course, this means you have to create 'x' versions of the video (one for each screen size).
Another approach is to do video streaming. You'll need a JavaScript player - but just like Netflix, you can have multiple sizes and bitrates, and the player will adjust the video playback on each device based on screen size and network speed. One huge advantage here is that it can adjust during playback to a different version to ensure that the video continues to pay.
There are services that will do this for you - just upload the video, and you'll get a link for the player that you can embed on your page - api.video is one.

Make YouTube video quality as low as possible when out of view range

Question
So I want to have embedded YouTube videos. But when you scroll down it's just gonna use the sound and put fixed controls on the bottom of the page.
When you don't see the video anymore but just use it as sound, the quality of the video doesn't matter, so to not drain someone's internet, can I change the YouTube video's quality to the lowest possible (144p) with YouTube ? It should still be possible to change the YouTube video to its old quality when you scroll back up.
Not part of the question, but if you know this you can help me out :)
In this post I saw its not allowed to
just have the controls of the Youtube video to use it for audio. But
if I do it this way where I still use the video but when off the screen just
use the sound. Is this allowed?

Making an HTML5 Audio Player for mobile browsers

I've spent a few days digging almost any post possible on this subject.
So far I haven't been able to find a proper solution.
Basically I would like to create an HTML5 audio player that plays music (one file at a time) on mobile browsers (iOS/Android) that will play the music instantly when the user clicks "Play" (just like youtube works on mobile browsers) and that the browser won't try to load/cache the whole file first before it plays it.
I tried Audio Sprites and that didn't work well (it is mostly related to web games).

HTML5 video, different poster image for devices without autoplay

The video is being used as a background video.
The poster image needs to be the first frame of the video so when the
video is loading there are no jumps.
On certain devices, particularly iOS where autoplay of videos is disabled, can I choose a different image to display?
SUMMARY:
Can I show a different poster image if autoplay is disabled?
Thank you.
Note: I'm aware I can hide/show things with media queries, but this doesn't work too well with the likes of the iPad Pro around.
If possible I'd like a solution that doesn't require detecting different devices.
I don't know the specifics of how you'd do it, but off the top of my head, I'd suggest running a detection script at some point beforehand. Use a "dummy" video (perhaps something like a 1x1px blank video in a data-URI to ensure speed and synchronicity) with autoplay on, then check to see if it's playing or not after shortly after it renders. Then flag accordingly depending on whether it plays or not.

Get orientation of HTML5 video [duplicate]

This question already has answers here:
Chrome HTML5 Video Flipping Portrait Sideways
(3 answers)
Closed 8 years ago.
I've spotted something strange happening. I have an MP4 file that was recorded using an android phone which I am embedding on the page to play using the HTML5 video tag. If I play it in chrome the video is upside down however if I view the same page in chrome on my phone the video plays the correct way round. Is there some sort of orientation meta value that the phone is reading and the desktop browser isn't? Obviously I want it to play the right way round in all browsers so is there a way I can work out which way round it is meant to be displayed either on the client side or with PHP on the server side?
The orientation is stored inside the a tag.
Maybe the desktop browser has no support for orentation.
Using PHP's getid3 lib you are probalby able to read that tag. but then you need to reconvert the video as there are no ways to set the video orientation atm.
http://getid3.sourceforge.net/
Anyway if you have maybe ffmpeg installed on the server you can create a function that checks for the orientation wehn uploaded and if its wrong it automatically converts the video.
in ffmpeg the code to rotate the video is (rotates the surce 180deg):
-vf "transpose=2,transpose=2"
Said that, no atm there is no easy way to automatically rotate the video on desktop devices.

Categories