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!
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 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 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.
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 have a bit of problem with streaming hls using video tag.
Originally I'm using flowplayer with the fallback flowplayer.ipad.js, it actually just generate video for using on fail to use flash (such as ipad).
ANW i see that it's use video tag for those device (i'm using it for android device too).
Simply said, this code actually can run on android:
<video id="testchoi" width="320" height="240" controls preload>
<source src="some_hls_stream_here.m3u8"/>
</video>
add type='application/vnd.apple.mpegurl' and it can run on ipad.
But put that aside, I want to asking that in android, if you change size while playing, it will get error. More specify, playing it and then go for fullscreen.
I think there's problem because google do not much support for hls (since it's apple standard ANW). Is there anyway to work around?
I'm trying to do something like:
beforeEnterFullscreen => stop video => enterFullscreen => reLoad video => play video. Any help in this too, I can't add the eventListener for fullscreen event
Found out the event for full screen in those device.
player.addEventListener('webkitbeginfullscreen', function(){
this.load();
this.play();
}, false);
player.addEventListener('webkitendfullscreen', function(){
this.load();
this.play();
}, false);
Last time i tried with webkitenterfullscreen, it's no use in mobile device.
And until now, i can just come up with above work around.