We encounter issue with Chrome 64 video element which not loaded and not autoplay although we used video attributes preload="auto" and muted on HTML element.
the video start load and paused, after research, we discovered it never starts to play, like the browser blocked it from playing.
our video doesn't have sound, no sound channel at all, and still no autoplay.
Chrome 63 working great and the same device with 64 stop autoplay.
we did all the things Google Chrome wrote in the release notes, but we think there is another issue we don't know about.
We discover that you need to add preload="auto" as HTML element attribute, but you also must put on JavaScript HTML element videoElement.muted=true as normal JS attribute.
it looks like a bug in Chrome.
Make sure data-saver is disabled. If data-saver is on, it will not load video.
Related
Odd one here.
Chrome 64.0.3282.137 for Android is no longer autoplaying videos. The video shows but it just sits on the first frame.
Chrome 63 autoplayed them fine. Chrome on desktop is fine and iOS autoplays the video also.
I have the muted, autoplay and playsinline attributes on my video element.
Has anyone else had this problem?
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 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 have taken this problem to various forums, and here once (where was it blocked as off-topic). It seems on-topic to me - a specific programming problem, a software algorithm, and a software tool commonly used by programmers.
I have a website of Flash SWF animations with sound. I converted the SWF to HTML5 using Google's swiffy. On desktop PCs, using Chrome, FF and IE, there is sound, but not in Mobile Safari and Android browsers. And not in Chrome on my iPad.
The audio is embedded in the code generated by swiffy, and it looks like it's MP3 encoded in base64 (see "data:audio/mpeg;base64," and "format":"MP3" in the html).
Since there is no developer forum for swiffy, and I get no replies from the feedback form, I looked around to identify what's stopping Mobile Safari, Android browers and iPad Chrome playing the sound. For Safari, I find things like "You cannot preload sound files" but since the sound is embedded in swiffy, there's no sound file to preload. Why no sound in Android and iPad Chrome, both Google products, is also a mystery.
I imagine there's no hack that will solve the problem, if Google hasn't managed to, but insights are appreciated.
I know it's quite late for you but i think some people may also face the same problem and come to this post. So I would like to offer my answer here
As Victor said, you can use getURL to trigger sound outside. But if I use getURL, I would use Web Audio API in the javascript side. Because using Web Audio API, it is possible to play multi tracks simultaneously in mobile. I intergrated library SoundJS to my project.
However, as you have to change every audio frame into a getURL function, it actually costs you quite a lot of time. I found another optional idea that you can just edit the swiffy core once and for all, which use native audio object (but it also mean you can only play one sound at a time in mobile).
originally, swiffy creates native audio object to play base64 encoded sound. Because of the mobile limitation, it's silent if the sound is not triggered by an input event. However it's possible to reuse an active audio object.
First, I have a button to start the animation,which also create an audio object and play it (with a zero length base64 encoded sound);
audio = new Audio("data:audio/mpeg;base64,");
audio.play();
in swiffy core script, search keyword "new Audio", you will see the part that swiffy plays sound. Instead of createing a new audio object, make swiffy use your old audio object
audio.src = a.sound;
audio.play();
After that, without revising, your swf should be able to play sound even in mobile.
However, as it's quite like a hack. It may get some unexpected problem
You can communicate the swiffy flash with the main HTML file so, inside actionscript, you can send a getURL call to javascript where you have a hidden html5 mp3 player, something like:
getURL("Javascript:playSound();");
In HTML, inside the javascript function, something like:
<audio controls>
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
</audio>
I'm still working in this but I hope this help you.
In my project, I need to autoplay HTML5 video in browser when page is loaded.
I have tried a several javascript solutions but none of them works.
I read that android browser is blocking autoplay due to protect from downloading a lot of data.
Can be this blocking feature turned off in browser/chrome/operation system settings ?
I cannot find any working solution how to enable autoplay. I have searched over plenty of stackoverflow posts and many other sites ...
By the way, I am using android 4.1.1.
Short answer: No.
Longer answer: We are looking at it, but the reason it is turned off by default is that we are really concerned about the battery and bandwidth on a users mobile device that we would rather require the user to perform a gesture.
In Chrome this seems to be working now, anno 2017: HTML5 videos play automatically in Chrome (59) on Android (7.1.1).
Note that the videos start muted. You can enable autoplay with sound on Android Chrome by navigating to chrome://flags and set gesture requirement for media playback to disabled (per this answer).
(Note that unfortunately disabling this flag seems to have no impact on an embedded YouTube video. I have openened a new question for this.)
add "muted" attribute in video tag like;
<video autoplay muted>
...
</video>
it will work. Google chrome doesn't autoplay the videos with sound. So, you will need to mute it.