I'm using code from here:
https://github.com/TwilioDevEd/video-quickstart-php
to develop a webRTC web app.
The example application, when running successfully on 2 browsers, creates the following HTML:
<div id="remote-media">
<audio src="blob:https%3A//myAddress.com/8a537e34-9ab2-4bea-a85d-61e5f80b585c"></audio>
<video src="blob:https%3A//myAddress.com/22b23b46-9021-4f15-9ab5-ffb78fec2d48"></video>
</div>
<div id="local-media">
<audio src="blob:https%3A//myAddress.com/740c8e33-cc60-4d1e-b1fe-2c23742e618d"></audio>
<video src="blob:https%3A//myAddress.com/3105d4a2-cd71-4408-8b7c-771cba677829"></video>
</div>
It works on Chrome and Firefox on a PC, and works on Firefox on Android.
Chrome on Android connects, there is video and audio input which is visible and audible on the remote browser, and there is video output - the video streamed from the remote browser. THE PROBLEM: there is no audio output.
I have tried $("audio").autoplay="true"; in the javascript that creates the <audio> element.
I have opened other web pages from the same Chrome installation on the same device (eg. YouTube) and I have audio and video.
What am I missing?
"On iOS, and Chrome for Android, autoplay doesn’t work; users must tap the screen to play the video."
source:
https://developers.google.com/web/fundamentals/design-and-ui/media/video/quick-reference?hl=en#autoplay
My solution:
<button id="audioOn" onclick="$('#remote-media > audio')[0].play()">Cant hear? Click me!</button>
Related
I have a .webm video that I am dynamically setting as the source for the video tag.
vidPlayer = document.getElementById("player");
vidPlayer.src = videoPath;
The corresponding HTML:
<body>
<video id="player" class="video-player"></video>
</body>
This is working perfectly on the web browser but when I view this on my mobile, I get a white screen.
I checked the elements tab in the developer tools if different HTML was getting rendered, but it wasn't.
However, in the network tab for chrome web, there is a call made to fetch the video but the same does not happen for chrome android.
I am running this code on localhost.
Can anybody tell me what I am doing wrong or why this is happening?
So, apparently, if your video does not have controls enabled, then for mobile browsers, the user must interact(tap or swipe on the screen) for the video to be visible on the screen.
With controls enabled the video is visible from the start.
I'm a web developer at a radio broadcaster. Since the release of IOS 11, we received several user complaints that our audio live streams can't be played on IOS 11 devices anymore. To embed the streams in our websites we use the HTML5 AudioElement. When debugging the javascript on an iPhone whit IOS 11 we recognized that calling the audio elements play() method resulted in a MediaError of ErrorCode 4 (MEDIA_ERR_SRC_NOT_SUPPORTED). All other devices (Android, Windows and IOS 10 and below) play the streams without any problem.
I created a little codepen example
<audio controls>
<source src="http://hr-hrinfo-
live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3"
type="audio/mpeg;codecs="mp3"">
Your browser does not support the audio element.
</audio>
https://codepen.io/ampersand83/pen/pWwgKm in which I just create an AudioElement via the AudioTag and hand the source Tag one of our stream URLs.
Devices running IOS 10 and below play the streams without any problem as well as current android or windows devices. However, a device running IOS 11.0.1 can't play the stream. I can't find any information on why this wouldn't be possible anymore. Does anybody have an idea why our streams won't work anymore and can give us advice on what we can do to make them work again?
This issue is down to Apple WebKit changing in the latest iOS release. For users running KH Icecast a fix can be expected soon (hopefully!) https://github.com/karlheyes/icecast-kh/issues/172
Adding a simple audio control like this
<audio controls>
<source src="https://swr-swr3-live.sslcast.addradio.de/swr/swr3/live/mp3/128/stream.mp3" type="audio/mpeg;codecs="mp3"">
</audio>
…does not play.
While this one does:
<audio controls>
<source src="http://mp3-live.swr3.de/swr3_m.m3u">
</audio>
The only difference I can spot is that on an MP3 it fails while a M3U playlist works.
On iOS 10 and below as well as on current macOS Safari, it works both.
Also Chrome on iOS 11 fails (same Webkit engine?!)
I saw this same issue when trying to load a local HTML file with audio controls into a UIWebView. However, my file was an .m4a audio file. I found that just removing type did the trick. So my HTML looked like this:
<div class="audio"><audio controls><source src="my_local_audio_file.m4a"></audio></div>
Using type=audio/mp4 also worked for me. So I'm guessing it's an incompatible mime type and just removing the type would be the best option.
Hope this helps.
i'm running a react js app that works perfectly fine on laptop but on the iphone the videos won't play even if you click them.
here is the code used to display the videos. I have no error in the developer console of safari either when clicking the video.
<video className='video1' loop autoPlay controls="true" width='50%' height='50%' src='leadmagic.mp4' type='video/mp4'></video>
Add an event click listener on your video tag and in it something like
$(".video1").click(function()
{
this.start()
});
If it doesn't autoplay on your phone it's probably that it isn't available on phone (On Android, I've got the same problem) to avoid the use of mobile data without the user's agreement
My team and I are tying to make a web application autoplay HTML5 video/audio tags on iPad. So far no luck after many attempts with CSS and JavaScript.
The question is: What other option is there to make it autoplay ?
I'm thinking native app with integrated browser with iOS API calls to simulate a touch/click and thus making the video/audio tags autoplay.
Is it possible and if yes, how and with which iOS version ?
Thanks
you can't auto-play videos and audios on iOS in normal mode, you may use trick like simulate user input to auto-play videos and audios.
Safari HTML5 Audio and Video Guide
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
This plays the movie: <input type="button" value="Play" onclick="document.myMovie.play()">
This does nothing on iOS: <body onload="document.myMovie.play()">
Have you found solution for autoplay video on iOS device? If not, I've just find a solution here, you can use WeChat of iPhone to open it (just support WeChat of iPhone but not support iPad WeChat), it use video.js player, related code as below:
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" webkit-playsinline="true" x-webkit-airplay="true" width="750" height="460" poster="" data-setup="{}">
It also has solution for support video play without full screen on iOS/Android/PC.
I cannot play audio with Chrome Mobile on Android. Is it restricted from playing audio (OGG)?
So, I've an HTML document. Inside, is the following audio tag:
<audio id="audiotag1" src="beep.ogg" preload="auto"></audio>
I also trigger the audio to play with JS:
document.getElementById('audiotag1').play();
The audio plays fine in Chrome desktop but doesn't play at all in Chrome Mobile. Are there some restrictions/flags I should know?
Chrome for Android requires a user-gesture to play the sound audio file. Make sure that your play invocation is on an event such as click.
Yes only Mozilla I believe really support that format on mobile