I am trying to Autoplay an mp3 file using html5 on ipad but its not working
Here is my code
<audio src="1.mp3" autoplay="" controls="" onended="this.play()"></audio>
The iPad does not support autoplaying of video and audio files. This is a design decision.
I found a way to auto-play video. I think is working on audio, also.
It works if you append/empty every time the video element from the div.
function addListeners()
{
// loop for each list item
$('#mscroll li').each(function looping(index)
{
// onclick...
$(this).click(function onItemClick()
{
// empty left column and description
$("#divplayer").empty();
// append video tag
$("#divplayer").append('<video width="'+video_width+'" height="'+video_height+'" controls="controls"><source src="'+videos_array[index].mp4+'" autoplay/></video>');
$('video').get(0).play();
});
});
}
I have tested this on my Ipad, iOS 5.1.1
Here is a pretty detailed overview of mobile audio and tricks to make it work, created in 2013, so quite recent:
http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/
Good luck!
Related
I am using ngx-videogular in one of my application to stream live media. It works perfect everywhere except the browsers in iPhone/iPad. I am using Hls.js along with ngx-videogular for streaming. Is there anything else I need to consider to make it working on browsers (chrome/safari/firefox) in iOS (iPhone or iPad).
Thanks in advance
I have found the solution just posting it here in case if someone needs in the future
Before reading further please take a look about the issue described in detail here which helped me to understand the root cause
https://github.com/video-dev/hls.js#embedding-hlsjs
If you are using npm you need to add the Hls.js in angular.json
You have to import Hls from hls.js in you videoPlayer component
import Hls from 'hls.js';
and you need to update your ngAfterViewInit() method like below
ngAfterViewInit(): void {
this.videoElement = this.videoElementRef?.nativeElement;
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource('your media url');
hls.attachMedia(this.videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
this.videoElement.play();
});
}
else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
this.videoElement.src = 'your media url';
}
}
Make sure you have the HTMLVideoElement and the element reference created in ts file
#ViewChild('videoPlayer') private videoElementRef: ElementRef;
videoElement!: HTMLVideoElement;
And your HTML video tag need to be updated with the reference like this
<video #videoPlayer autoplay controls playsinline>
Have a good day!
I'm at the end of my rope with a certain issue of my videos not playing on my iPhone 6 browsers (Safari and Chrome) and certain ipads. It works great on desktop browsers, Android Chrome and even my iPad mini in Safari. I've researched this for a while now, including Stack Overflow but everything I've tried still doesn't play the video on my iPhone (only shows the initial frame image). Here is my video test page where I'm making edits, my code below and what I've tried to fix it based on research:
<section id="video-wrap">
<video class="video <?php the_field('header_video_class'); ?>" autoplay muted loop>
<source src="/video/<?php the_field('header_video'); ?>.mp4" type="video/mp4">
<source src="/video/<?php the_field('header_video'); ?>.ogg" type="video/ogg">
<source src="/video/<?php the_field('header_video'); ?>.webm" type="video/webm">
</video><!-- /video -->
<div id="video-wrapper">
<div class="video-caption">
<?php the_title(); ?>
</div><!-- /content -->
</div>
</section>
I've tried adding the controls parameter back in, no luck
I've tried adding the video source within the video tag and removing the additional source tags, no luck
I've also compressed the heck out of my video. This test example is currently 640 × 360, H.264, AAC. Still no luck.
I've tried removing the video caption overlay in case that was conflicting. No luck.
WHAT AM I MISSING? Thanks in advance for any help!
New Answer (working) :
Well I somehow missed this one little detail "only shows the initial frame image". I've misread the Question as "video does not even try to work" (because it can happen with some models/brands vs H.264 codec).
Acoording to this blog aticle : html5 Video Autoplay on iOS and Android...
Your code should look like (also use low-res MP4 version) :
<video class="video" playsinline autoplay muted loop>
Finally also check : Webkit policy for video section. Maybe it'll be useful to trick the machne.
Older Answer :
I've also compressed the heck out of my video. This test example is currently 640 × 360, H.264, AAC. Still no luck.
Your H.264 video is encoded with incompatible Profile : High # Level 3.0.
Solution : Re-encode with choosing Main # level 3.1 (also can try level 4.0).
Since no iOS hardware here, test these re-encode :
Main profile #L3.1 : clip-intro-low_v2.mp4
Baseline profile #L3.0 : clip-intro-low_v3.mp4
PS: You may have a similar issue to this Question (in case it's useful to you).
There is a trick to load a video tag in the safari browser. We simply just need to reload the page where the video tag is placed.
And to reload the page we can use this code
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
}
else {
// Check if video tag exists
if (jQuery(document).find('.hero-slideshow .hero-media-wrap video').length > 0) {
if (window.location.href.indexOf('reload') == -1) {
window.location.replace(window.location.href + '?reload');
}
}
}
}
This might not be a permanent solution but we can use this code as quickfix.
setTimeout(function (){
$('.hero-slideshow .slides .hero-mp4 video').once().each(function(){
$(this).parent('.hero-mp4').show();
$(this).get(0).play();
});
}, 2000);
Add source to the video tag and add this attribute too.
preload="auto"
<video width="100%" height="100%" loop muted playsinline preload="auto" class="hero-video media-document mac video">
<source src="VideoSrc" type="video/mp4"></source>
</video>
It appears that neither volume controls nor mute/unmute work on iPad. Did anyone encounter this problem before? Pretty straightforward functionality, no errors, just silent fail.
var player;
$(document).ready(function () {
player = new MediaElementPlayer('#player', {});
});
function mute() {
player.setMuted(true)
// player.setVolume(0) does not work either on iPad
}
function unmute() {
player.setMuted(false)
}
HTML:
<audio id="player" controls="controls">
<source type="audio/mp3" src="intro.mp3" /> </audio>
Nevermind. Since MediaElement.js uses native <audio> controls on iPad, according to Safari HTML5 Audio and Video guide, it is not possible to control HTML5 audio volume via script:
On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
... need to program a workaround for iPads.
I am using backbone.js to replace content on a page. After backbone places the new content I call a JW Player script to create a video (Flash normal web, HTML5 video tag on iOS).
When I play one video, stop that video, use backbone to replace the video, click to play the new video... the new video just has a spinner and won't play. (this only happens in iOS devices)
Has anyone had this issue that knows what might be happening and how to fix it?
This content is getting updated via backbone.
<div class="media-wrapper">
<div class="media-holder"><div id="media"></div></div>
</div>
This function is being called after backbone and creates the video on the div above.
function create_video(url,w,h,thumb)
{
jwplayer('media').setup({
flashplayer: '/api/js/jwp/player.swf',
skin: '/api/js/jwp/video.zip',
wmode: 'opaque',
image: thumb,
file: url,
height: h,
width: w
});
}
I am pretty sure it is not JW Player, but something to do with iOS and how it handles html5 videos.
This is a known bug[1] with using the same div and calling setup multiple times. The forum post linked to from the bug has the simple workaround of incrementing your div id each time you call setup.
[1] http://developer.longtailvideo.com/trac/ticket/1615
I'm working on a Sencha Touch ipad app which pulls content from a JSON feed. The JSON contains some images, plus some video URLs from Youtube and Vimeo.
Where do I start trying to play embedded video in the app?
A few weeks on from my original question, I have a few tips to share on this topic.
We've built an app quite similar to the Sencha Touch demo app Touchstyle. One difference was we wanted to display videos as well as images referenced in our JSON feed.
Our JSON looks something like this for a single item of media, which could be of type image or video:
"Media": [{
"id":"28542",
"title":"mirrortrackmovie",
"type":"video",
"thumb":"http:\/\/i.ytimg.com\/vi\/X-z3_-7pwZ0\/default.jpg",
"video_host":"youtube",
"video_id":"X-z3_-7pwZ0",
"video":"http:\/\/www.youtube.com\/v\/X-z3_-7pwZ0"
}]
In order to embed Youtube and Vimeo videos in Sencha Touch, you have to use the iframe embed code that both sites provide. The following XTemplate inserts the correct video_id into the relevant embed code, depending on where the video is hosted.
tpl: new Ext.XTemplate(
'{[this.renderMedia(values)]}',
{
renderMedia: function(media) {
if (media.video) {
if (media.video_host == 'vimeo') {
return '<div class="video vimeo"><iframe class="vimeo-player" type="text/html" width="640" height="385" src="http://player.vimeo.com/video/'+media.video_id+'?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe></div>';
} else {
return '<div class="video youtube"><iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/'+media.video_id+'" frameborder="0"></iframe></div>';}
}
}
}
}
)
By and large this method has worked fine, although we did experience some problems to do with loading video in a buffered carousel (a topic for another question).
You can start by looking into the Sencha Touch Kitchensink : Media > Video Example
http://dev.sencha.com/deploy/touch/examples/kitchensink/