Today I tried to play a video including sound automatically as soon as the site loads.
Nothing worked for me.
After a little research I saw on the "w3schools" website
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
For me if w3schools writing this, it's probably true.
But in the example on their site it works, w3schools video player
Change the "controls" to autoplay and its work including sound.
Why does it work for them?
Related
I've loaded this embed code to our website on the homepage.
https://player.vimeo.com/video/254985863?autoplay=1&loop=1&autopause=0&background=1" width="1903" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
You can see the site here
The video autoplays perfectly everywhere except Safari. In Safari it just loads the cover image. I am guessing that safari 11 thinks the video has sound but it doesn't. Is there a setting to show safari that this is a muted video?
I believe this is a very recent Safari bug, possibly in 11.0.3 or 11.0.2. I've just reported this to Apple, please do the same so that they get on it: https://www.apple.com/feedback/safari.html
It's definitely treating the video as if it has sound - if you set the 'Settings for this website' to 'allow all autoplay' then it will work - which is useless because the default is 'Stop Media with sound'
We were experiencing the same issue with Safari (only) for background video and I have been paying close attention to this thread since it was raised back in February (I did report the issue to Apple as suggested) but upon checking the live site again today this is now working correctly once again.
Neither the Vimeo videos or website code has been changed but the videos are now playing in Safari as expected (previously it was displaying a static image only). I am still running the same version of Safari as I was before, when this was an issue (11.0.3), so I can only assume that something has changed on the Vimeo embed side of things. Perhaps they have updated the mute code.
It is now working correctly again, but I can find no mention of anything changing on the Vimeo side.
on https://www.apple.com/safari/
"Stop auto-play videos.
Safari prevents unexpected and unwanted videos with audio from automatically playing while you browse. Just click the play button if you want to view them. Have a favorite site where you always want videos to play? Use per‑site settings in Safari to enable media auto-play."
I've been trying for days to get a specific behaviour on the homepage of my personal website. But I didn't find any good solution yet. Can someone help me please :-)
I have a homepage with a grid of short videos with different durations. I want each of them to play completely on mouse hover. On second hover most should replay normally, but some should play backward.
I read that playing videos backward was not good in terms of performance because native browser players were not meant for that. So I searched for an alternative and came to the following idea:
Double the duration of those "special" videos so they integrate their forward sequence (1-2-3) and backward sequence (3-2-1) in the same file. On first hover, the video would play its first half, and after that only, on second hover it would play the second half.
Here is a JSfiddle where I put all elements for testing… but I'm currently stuck with my poor JS skills.
HTML:
<video class="forward-backward">
<source src="http://tacco.fr/divers/forward-backward.mp4" type="video/mp4">
<source src="http://tacco.fr/divers/forward-backward.webm" type="video/webm">
</video>
jQuery:
var figure = $("video").mouseover(hoverVideo);
function hoverVideo() {
$(this).get(0).play();
};
It may be a very bad idea in terms of performance (because filesizes are bigger to load), so I'm really open for any others.
Don't hesitate to ask if you have any question.
Thank you very much :-)
BTW: no more than 5 videos should play at the same time… I don't know how to do that…
I ran into this problem. The best solution I can think of is to use a video editor and reverse the video files themselves. Then you create two video elements, one with the forward video as the source and one with the reverse video as the source. Using javascript, you can then show the correct video (and hide the other one) depending on whether you want the video to be playing forward or backwards. Does that help?
I've been attempting to find a method for playing video inline in mobile safari for awhile now.
I know this is possible and has been achieved (see link)-
http://www.raptmedia.com/project/philips-designed-play-drives-mobile-video-engagement
However, I am unable to determine how this is done. I've tried manipulating iframes but this alone doesn't seem to have any impact.
I've included a js player for cross browser compatibility and used it within an iframe, no luck in mobile:
<div class="vid"> <video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="600px" height="600px">
<source src="video.mp4" type='video/mp4'/> <source src="video.webm" type='video/webm'/>
<source src="video.ogg" type='video/ogg'/> <track kind="captions" srclang="en" label="English" />
</video> <script> var myPlayer = _V_("vid01"); ` </script>` </div>
I know this is an old question, but it ranks high in my Google search and I can at least answer the question posed above, so I'll add this in case other people come across it: why does it work on that particular page?
I looked at it, and it doesn't really play inline video. On my iPhone, it preloads a ton of JPG frames and then "plays" them like a movie, while playing an mp3 audio track behind it. So they are just faking it, basically. Still not able to play the video inline on the phone.
The only solution I know is based on the drawImage function of the canvas tag... I spotted the basics here on SO but there's some fun left for the reader :D, in a few words, You hide and play the video and at the right freq You render the current frame into a canvas, some attention is needed for the audio sync. It works better than expected.
Here is a basic sample, and here another one where I try to apply some webkit based filters.
Hope it helps, have fun!
You can use something like this library to make it work: https://github.com/bfred-it/iphone-inline-video
It basically uses an audio tag to drive the video by seeking to the current time, so you can have the frames updated without having to play the video.
The good news is that iOS 10 will support this, so no more hacks are going to be needed: https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_12
I have a problem on a website.
When I reach this url http://www.diamir.com/en/product/diamir-vipec-12/, on page load, videos are not loading correctly. When I click on the play button, video remain black and only after a while become clear. It's really a strange behavior. I don't know if it is an issue with the codec or something else.
The website is optimized using PageSpeed Service from Google.
Codec: AVC (Baseline#L1.3)
Here is the HTML source:
<video controls class="img-responsive">
<source src="http://a3.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_x264.mp4" type="video/mp4">
<source src="http://a1.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_VP8.webm" type="video/webm">
</video>
Someone has had the same issue?
There are a couple of things you need to fix/take into account:
your videos play well in Chrome but IE displays an error message and firefox just won't read them.
your mp4 has the MOOV box after the MDAT box which means your mp4s are not prepared for web delivery. This issue is described here
Suggestions to fix it:
use Handbrake, ffmpeg or MP4Box to prepare your MP4 files for web delivery (aka faststart)
use the preload attritube set to "auto" in your HTML5 video tag for faster playback on click after page load (if you do that do not load too many videos on the same page or your end user will suffer network congestion)
set width an height for your HTML5 video tag otherwise it will scale to the resolution of the video file. You may want to keep control on that especially for responsive design.
Your videos have no audio track. That should not be a problem for HTML5 video playback but keep that mind if needs be. I have seen cases where you need to add a silent audio track to make it work on all devices (especially for exotic fallback from HTML5 video).
You can read there for more infos on HTML5 video. I suggest you double check the section called "MIME Types Rear Their Ugly Head" as well.
The autoplay do not working in mobiles (Android, iOS). The autoplay work in mobiles? Exist another plugin in html5 to show videos and start automatically in mobiles?
There is a workaround for this. What I've done is dynamically append the video element, and have the autoplay setup option set to true.
The trick is to place an element in front of the video player that initiates the action to append the video element. You can't use video.js's poster since that isn't available until videojs is instantiated. I haven't tried to trigger that event manually in javascript, but that might be worth a try.
Relevant Question
As of January 24th, 2017
HTML5 video tags can autoplay on android if the video is muted. You would need to include the muted and autoplay attributes in the tag to make it work as intended.
Here is a link to the article: Autoplay on Chrome for Android as of version 53
No, autoplay does not work in mobile devices. A user action (click, etc) is required in order to begin playback in order to avoid excessive bandwidth use.