Video on smartphones not working

It looks like you’re using a JavaScript minifier that’s preventing the video player setup process, but you’re also running into one of the limitations of iOS, which is that videos are not allowed to autoplay. Since you’ve also disabled the player controls, there’s no way for the video to play on iOS.

I’m trying to figure out more about what’s happening with the JavaScript. The plugin’s script is loading in the header, but it’s supposed to load in the footer. Have you enqueued it manually?

Hi,

thx for your answer.

I am using WP Rocket which is not a minifier but a concatainer, maybe that’s the thing. Anyway I have deactivated it.

There is no reason for your script to be enqueued elsewhere you done it. ^^

Are you telling me that if the wanted display with autoplay, loop and without controls is not allowed on iPhone ?

Best

As the WebKit people said recently “Since before your sun burned hot in space and before your race was born, Safari on iOS has required a user gesture to play media in a <video> or <audio> element.” So without controls there’s no way for a user to play the video. Luckily this will change in Safari in iOS 10 and mobile Chrome 53. Autoplay will work as long as the video is muted. In the meantime, I recommend enabling controls.

I did not know about this, so thank you for your feedback and experience.

You are entirely correct about these HTML compatibilities.
Anyway, now that I have changed and choosen the fixed controls, on smartphone the display uses native’s video controls, and on desktop I have the controls-bar.

I wanted to look arround on how overwriting the css for @media all and (min-device-width: 481px) to hide controls-bar when it’s not a smartphone, but in fact everythings works in javascript.

As couldn’t also undertand how you manage to display the player with all the options. I was looking to hook on it and possibly change the vjs-controls(enabled|disabled) class on purpose when it’s a smartphone or a desktop.

Maybe you could easily show me how or where to look. As it is like a required option for a friend, he is disposed about a small donation if you could manage this ??

Waiting for your answer soon,
Best

Yeah, I don’t think you could do this through CSS because Video.js relies so heavily on JS. Video.js does some kind of check to determine if it’s on a touchscreen device and sets a variable called TOUCH_ENABLED. I added this after line 352 in js/kgvid_video_embed.js so it runs as the video is being set up.

if ( videojs.browser.TOUCH_ENABLED == true && player.controls() == false ) {
	player.controls(true);
}

Now if controls are disabled, on a desktop browser I don’t see any controls but they show up on an iPhone.

The line I added this after is jQuery('#video_'+id).append(jQuery('#video_'+id+'_watermark'));

Thx so much!
It totaly works, that’s why you completely deserve a donation!

Btw, will this be a part of a next update ? Because, right now I have the js
which is hacked. But in fact it’s like a must have feature ^^

Best

Yes, this or something very similar will be in the next release. Thank you for the donation! I really appreciate it.