I have a website with a big video in the background and I used HTML5 video for it. It does all I want on desktops, I can't make it work on tablets though (don't need it on mobiles) - instead of a video I see a black background only.
Code below:
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src="http://link/vid.mp4" type="video/mp4"/>
<source src="http://link/vid.ogv" type="video/ogg"/>
<source src="http://link/vid.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
Is it caused by the autoplay option? If so, is there any workaround?
Thanks,
S.
On most mobile browsers (including tablets - definitely iPad), autoplay will not work. The browser won't download any of the video file, not the first frame or even the metadata, until there's some kind of user interaction event - typically either a click or a touch.
The first thing you can do to alleviate the situation is to set a poster attribute on the video element, which is the URL to a poster image. That image should be visible right away in place of your video. If you want to go the extra mile, you can set a background color on the body so the user will see that while they're waiting for the poster image to load.
Next, you can add a touch or click event listener anywhere you want in the document that starts the video playing as soon as the user interacts with your web page.
Related
See this pen: https://codepen.io/keithpickering/pen/qGyvwp
On the left is a "Boomerang", which is generated with our iOS app before being uploaded to S3. The other two videos are non-boomerangs also sent from the same app.
If you open this pen in any desktop browser and most mobile browsers, both videos play perfectly fine. However, in Chrome for Android, the Boomerang video skips around and generally just doesn't work properly.
Boomerangs are generated by taking a few seconds of video, then using AVKit to copy the video, reverse it, add the reversed version to the end, and loop the whole thing as necessary to reach a >=4 second duration.
I think this is some kind of encoding issue, but I'm not sure how else to test. What should I look for in the metadata/codec info within these files to further debug? If it is an encoding issue, is there any kind of third-party video player that might work better than the native one? All of our Boomerangs are generated the same way, so we can't go back and reencode them all.
Posting the code from the pen because Stack Overflow is making me:
<div class="col">
<h2>Boomerang</h2>
<video class="image-container video-container" autoplay loop muted playsinline><source src="https://queso-test.s3.us-west-2.amazonaws.com/J8UA23OSOFSE2E5L.mp4" type="video/mp4"></video>
</div>
<div class="col">
<h2>Regular Video</h2>
<video class="image-container video-container" autoplay loop muted playsinline><source src="https://queso-test.s3.us-west-2.amazonaws.com/5T7Z9GIG5SPYOX03.mp4"></video>
</div>
I'm trying to add a next (or even previous) button to the notification Chrome will show on a Android (or even Apple) device when you are playing audio on a website (in the background). Clicking the button should fire a link or a JS function.
See below screenshot, I am using this code:
<audio controls autoplay onended="myFunction()">
<source src="<?php echo 'http://www.music.*****.com/music/' . $_GET['file']; ?>" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Screenshot from Android
If this is not possible, perhaps there is an easy way to make an app that can do this and fetch mp3's over http. I really just need a working solution, efficiency and looks are secondary as I am using this together with some friends only.
Thanks!
I have a landing page that has a few sections on it. Each section has a button that when clicked, I would like a video to pop-up and play in a modal-type window.
I have a few questions based on all of this so far.
The videos are handed to me in .m4v format, which I'm handling through html5 as:
<video id="delivervideo" width="100%" height="100%" controls>
<source src="#Url.Content("~/Content/videos/DeliverSection.m4v")" type="video/mp4">
Your browser does not support the video tag.
</video>
This is actually embedded in a Bootstrap Modal, and looks quite terrible on any non-PC device (appears on the top of the screen and cut-off).
When I start playing the video, if I skip ahead using the built-in controls, the video simply stops. I am unable to start the video again unless I refresh the page and start the video over.
So my questions are sort of broad here, but they are essentially:
When my graphics team is handing me videos, what format(s) should I request so the video works on iOS, Android, Chrome, and IE? Is there a couple of formats I should support? We have a lot of software to be able to change the format of the videos, just unsure on what formats to use
If I'd like to continue opening the video in a pop-up modal-type window, is there a better solution to this than Bootstrap? Something someone here has experience with that works nicely?
Has anyone else experienced issues with the built-in html5 <video> tag controls, where skipping ahead/rewinding causes play-back issues?
I can share the page to someone through PMs if they are willing to take a look, but really nothing out of the ordinary. Just a simple <video> tag supporting mp4 type, while the video is in .m4v format. It only seems to work on Chrome so far, so not very useful to mobile or tablets.
Note, I am using ASP/MVC and the website is hosted in Microsoft Windows Azure as a Website, not a VM where I have control over IIS.
I am trying to play my webm video on my android.
my code is:
<video width="290" height="517" autoplay loop>
<source src="/assets/videos/livematch.mp4" type="video/mp4;">
<source src="/assets/videos/livematch.webm" type="video/webm;">
</video>
I tried without semicolons as well ...type="video/mp4"...
When I open the page the placeholder of the video is black.
When I am trying to download the clip (press and hold on it) it actually saves the mp4.
How should i write the code so it will automatically recognise the device?
Hey I would try to remove the type attribute like showed in the first link I provided. Otherwise you can try to manually call video.play() like showed in the second link.
Playing HTML5 Videos in Browser -- What Works for Most Android Devices?
HTML5 <video> element on Android
I am developing a web page that uses the HTML5 video tag. When I load the page in my ASUS eee pad transformer in the default browser I see a grey area with an icone in the middle instead of the video.
I then have to click in the video area for it to load and only then it is possible to play the video.
This only happens in the default browser. I have tried it on Chrome, Firefox and Opera and it always worked without me having to click the video area for it to load.
My question is. Why is this happening and is there anyway I can correct the issue?
I have tried using the atributes autobuffer and preload.
UPDATE:
I manage to make a workaround. I used Javascript on the page load and the video not only loads but also plays. So the problem where I would see a grey rectangle in which I would have to click to load the video is solved.
There's nothing you can do I'm afraid, the default Android browser is incredibly fiddly with HTML5 video and you're lucky that you can play it at all!