Only one video is playing simultaneously on Safari (Mac) - html

I used Simple Peer(WebRTC), ReactJS for my video call service. In the video call screen, I used 2 video tags(contact video and user video) for video playback. When the call gets started after a successful connection, only the contact video is getting played(1st video tag) and when the contact turns off their video user video is getting played(2nd video tag).
This only happens on Safari(I only tested on Mac). It works fine in other browsers(Google Chrome, Firefox).
Is there a way to fix this issue?

WebRTC depends a lot on browsers and Safari has specific requirements (like strict order of tracks). Check JS console to identify any errors.
You can experiment with a turnkey html5 videocall solution that works and try to replicate.

Related

HLS / Media Source Extensions <video> with muted & autoplay freezes on first frame on mobiles

I attempted to add a Hero background video to our website. It's being served from mux.com.
I use it with HLS, but for Chrome it uses Media Source Extensions from what I gather.
I know that for HTML5 video to auto play, it has to be muted also, and I have both parameters over there.
Apparently, on Android Chrome I get behaviour where it freezes on the first frame (black), but doesn't continue and I cannot trace why.
In case of freezing, it still does load the video, just that it's not getting autoplayed.
I am out of clues.
Isolation sandbox:
https://codesandbox.io/s/32yky6x7mq
https://32yky6x7mq.codesandbox.io/
In my attempts, I have reduced this down to simple HTML app with Hls.js library and basic <video> tag where it breaks on mobiles.
How do I get the video to autoplay on mobiles?
P.S. To see exactly what I have tried, please see edit history, as I have been trying lots of things.
On my device specifically, Android Chrome, it's caused by Data Saver.
Disabling Data Saver, the video autoplays.
It's paradoxical, because with Data Saver I expect for the video to not be loaded at all, but it's getting loaded and the autoplay gets interrupted instead - resulting in more waste.
Possibly, there are other settings out there in the wild that prevent autoplay, for instance, couldn't find the exact reasons why iOS is not working. There are hints about playsinline attribute, which I have not tested yet. (Will update when I do)
Worth noting, is Feature-Policy header too: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
It didn't help me in my scenario, but it can probably be related with autoplay in other scenarios.

Auto play html5 video on mobile browser

It is argued that html5 video cannot be automatically payed in mobile browsers.
However, I found this website autoplaying video (though not looping it) on mobile:
http://campaign.nissan.co.il/qashqai0515
How is this possible?
Autoplay does not work on all versions of iOS and modern versions of Android. Both platforms require the user to click the video or a play button to initiate video play. It was made this way to conserve the devices battery life and limit cellular bandwidth.
There have been some workarounds in the past that use javascript to trigger the play event however from my testing those workarounds no longer work. Another trick is showing a sequence of images that looks like a video - Apple has done this in the past.
Note: I tested the link you provided in iOS 8 and it does not autoplay.

HTML5 Multi Track Sync Video Audio on IOS

I'm looking for a way to multitrack a video with a bunch of sounds.
IOS prevent multiple audio and video to play at the same time.
I found a way on IOS, to launch a sound and an audio by putting the video.play() command in a setTimout (500ms). But this don't works every time, and the medias are not sync. This is not code consistent and maybe apple will correct this on breach on next version of iOS
MediaGroup and MediaController seem supported on iOS but not work properly.
AudioTrack was implemented on some navigators and seem to be removed
What is the alternative?
I've already tried those:
//gingertech.net/2011/05/01/html5-multi-track-audio-or-video/
//blog.denivip.ru/index.php/2013/10/alternative-audio-tracks-in-html5-video/?lang=en
//ldki.blogspot.ca/2012/11/15-html5-video-player-sync-second-audio.html

Html5 mp4 video freezes IE

I have a html5 video on my site and all was working well until client gave me a new video to replace the old one. The new video crashes Internet Explorer (IE10 and IE11 - haven't tried others). When trying to play, a second of video is shown then whole site freezes and a pop-up tells me it's not responding.
No other browser is affected.
Have tried transcoding video in Handbrake to make sure it's using H.264 codec, but still no luck.
All other videos on site work fine in IE.
Has anyone got any suggestions that I can try?
Ps. Sorry, but can't share the video file as it's confidential to the client.
Oops - found out it was not IE but Avast (anti virus) add on that was freezing video.
Disabled Avast and video played as normal.
Still don't know why it only affected one video.

Issue Playing HTML5 Video in Firefox on Linux

When I enter a WebM video URL in a web browser on Windows 7, the video automatically starts playing. But in Firefox on a Linux system, when I enter a WebM video URL it asks me if I want to download that video file, rather than automatically playing it in the browser.
This may be a silly question with a super simple answer, but what do I need to do to make this video play within the browser, rather than asking me if I want to download it?
When I try the same thing in Chrome in my Linux environment, the video automatically plays within the web browser as I would hope, so it seems to be something specific to Firefox in Linux that I need to change.
Go to this link http://webm.html5.org to verify that you can play WebM videos and make sure you update to a newer version of Firefox.