We Keep Coding

Black screen instead of video background on IOS

Video background from site header not showing on iPhone. I read that need to specify attributes, but they were already there except of 'preload'. Ive just added all necessary attributes additionaly, but it did not help :(
This code Ive added.
<script>
$(document).ready(function(){
var video_header = $('video');
video_header.prop('preload','auto');
video_header.prop('autoplay','true');
video_header.prop('loop','loop');
video_header.prop('playsinline','playsinline');
video_header.prop('webkit-playsinline','');
video_header.prop('muted','true');
});
</script>
Btw, chrome dev tools on Iphone 12 pro display everything.
<video loop="" autoplay="" playsinline="" muted="" preload="auto" id="mejs_5217348005770652_html5" src="https://suik.online/wp-content/uploads/2022/11/50-mb.webm" style="margin: 0px; width: 390px; height: 780px;">
<source type="video/webm" src="https://suik.online/wp-content/uploads/2022/11/50-mb.webm">
</video>
Web-site
Thanks for any help.
To see it work on an iPhone

Currently, WebM video playback is not available on iPhone. If you want to play WebM files on iPhone, you need to have mp4 file format as well.

prevent video to download certain source on mobile

I'm building a webpage where I have several video, so I've exported 2 different media for each of them: one high quality to show on desktop and a lower quality one to show on mobile.
To do so I styled my video element like this:
<video autoplay muted loop playsinline id="video-1">
<source class="mob-hidden" src="video-1.mp4" type="video/mp4">
<source class="des-hidden" src="video-1-low.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
where mob-hidden and des-hidden are css classes with a display: none; to prevent them to appear in mobile or desktop.
The problem is that I noticed that when on mobile and desktop the page still downloads both video versions even if it uses just one, so I guess that using css classes is not enough.
Can you help understand how to prevent the webpage to download media that it's not going to use? so low-quality video when on desktop and high-quality videos when on mobile.
Thank you very much!

Try this:
<video controls>
<source src="the-sky-is-calling-large.mp4" media="screen and (min-width:800px)">
<source src="the-sky-is-calling-large.webm" media="screen and (min-width:800px)">
<source src="the-sky-is-calling-small.mp4" media="screen and (max-width:799px)">
<source src="the-sky-is-calling-small.webm" media="screen and (max-width:799px)">
</video>

I can see 3 potential approaches here
Checking width of the page in CSS
Since your video have two differences classes , you could code something like this
.des-hidden{
display: none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
.des-hidden{
display:none
}
.mob-hidden{
display: block;
}
}
BUT you'll have to change your HTML to something like this, to make it work
<video autoplay muted loop playsinline id="video-1" class="mob-hidden">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<video autoplay muted loop playsinline id="video-2" class="des-hidden">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Checking width of the page in JS
You could use something like this changing your classes for IDs:
window.addEventListener("resize", function(event) {
if (document.body.clientWidth <= 768) {
document.getElementById("des-hidden").style.display = "none";
document.getElementById("mob-hidden").style.display = "block";
} else {
document.getElementById("des-hidden").style.display = "block";
document.getElementById("des-hidden").style.display = "none";
}
});
Checking device in Back-End
Depending on your backEnd, if you have one (PHP, Node.Js) , you could check for the user-agent, and decide to display one video or the other
You can look at this if you use PHP :
Simplest way to detect a mobile device in PHP
Or if you use NodeJs :
Identify if the request is coming from mobile or not
More details
On recent browser, using the display:none CSS property will skip completely the file loading, meaning the video won't even get requested by the browser, saving both loading time and data usage
(See Does “display:none” prevent an image from loading?
Using a back-end solution could help to be sure the right video will receive the right video, preventing useless loading time, but it'll be harder for your page to adapt if the width of the page changes after the loading
So I recommend using the CSS option if you don't want to deal with Ajax or nodeJs asynchronsism

Videojs HLS m3u8 files are not playing in iOS devices and safari browser

I am able to play the m3u8 files in the PC and android devices, but i am not able to play those files in the iOS mobile devices and safari browser,
I disabled the overrideNative to 'true' for the android devices, so its working in the android.
but we should not disable the native for iOS and safari, because iOS Safari uses a native player,
so I have set the overridnative false for the iOS. but its not working.
I am following new videojs versions.
videojs : 6.4.0
videojs contrib hls: 5.12.2
videojs flash: 2.0.1
Example
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls</title>
<link href="https://unpkg.com/video.js#6.4.0/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js#6.4.0/dist/video.js"></script>
<script src="https://unpkg.com/videojs-flash#2.0.1/dist/videojs-flash.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls#5.12.2/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<h1>Video.js Example Embed</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="600" height="268"
data-setup='{}'>
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
</video>
<script>
let videojshls= videojs('my_video_1', { html5: {
nativeAudioTracks: false,
nativeVideoTracks: false,
hls: {
debug: true,
overrideNative: false
}
}});
</script>
</body>
</html>
example jsfiddle
please can anyone help me. thanks

Try this http://jsfiddle.net/fxfktztx/1/. It works for me.
var overrideNative = false;
var player = videojs('example-video', {
html5: {
hls: {
overrideNative: overrideNative
},
nativeVideoTracks: !overrideNative,
nativeAudioTracks: !overrideNative,
nativeTextTracks: !overrideNative
}
});
player.play();
As far I know, videojs options should be passed when the player is initialised, either with data-setup attribute or directly into the constructor as I did in the example above.

Notification sound not working on mobile browswer's

I have a javascript code like below:
<script type="text/javascript" charset="utf-8">
function addmsg(count, play){
if(play == 'true')
{
$("#my_audio").get(0).play();
}
}
</script>
<html>
<audio id="my_audio" src="popsound.mp3"></audio>
</html>
In the above code "play" variable is like a flag containing true or false value, and it plays the sound when play=='true'.The above code is working fine on my laptop browser,but when I'm accessing the page through my mobile the sound doesnt gets played. I did some research but I'm unable to figure out how to do it in my case. I'm very new to this field so sorry if this question is senseless, but can any one please help me. I wanted to make it work fine for mobile browser's too.Thank you in advance.

You need to put different formats for all devices (.ogg and .mp3).
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Source : http://www.w3schools.com/html/html5_audio.asp

Show html5 video controls only on Android

I have this video tag with flash fallback:
<video id="myvideo" width="480" height="224" autoplay preload="auto" loop poster="intro6.jpg">
<source src="intro6.mp4" type="video/mp4">
<source src="intro6.webm" type="video/webm">
<source src="intro6.ogv" type="video/ogg">
<object width="480" height="224" type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" />
<param name="flashvars" value="autostart=true&controlbar=hide&image=intro6.jpg&file=intro6.mp4&repeat=always" />
<img src="intro6.jpg" width="480" height="224" />
</object>
</video>
And as you can see i do not have any controls, it's just a looping video that autoplays. This works great on desktop browsers, but not so much on Android and iOS.
So i need the controls to be visible on Android as it doesnt autoplay or loop.
And on iOS i need the video not to autoplay.
Is there a way to accomplish this with javascript? And keep in mind i don't know much javascript.
Thanks!

Probably the easiest and most practical way is to check the user agent to see if you're on Android.
if (navigator.userAgent.indexOf('Android') >=0) {
document.getElementById('myvideo').controls = true;
}
In general, user agent sniffing is "frowned upon". It's usually best to use feature detection, since some far future version of the Android browser might support autoplay. But mobile browsers aren't usually very good at telling you when they don't support the video/audio spec.
Another way to do it is to check for events. In FF/Chrome/IE9+, the event will fire a series of events, including: loadstart, progress, durationchange, etc... up to play and playing. In the Android browser (at least, the old-ish version that I have), the video will instead fire a stalled event. You could look for stalled and then enable the controls. You could remove them again when you get the 'play' event.
var video = document.getElementById('myvideo'), started = false;
if (video && video.addEventListener) { //in case of IE < 9
video.addEventListener('stalled', function() {
if (!started) video.controls = true;
}, false);
video.addEventListener('play', function() {
started = true;
video.controls = false;
}, false);
}
But there are other reasons why you might see that event, like a slow internet connection. So you'll still risk seeing the controls for a bit in a desktop browser until the video starts.
You don't need to worry about iOS. It won't autoplay, even if you want it to.