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.
Related
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?
I've searched a bit here on SO to find a way to show instagram video using the public api ?__a=1 method. I've found a question that have pointed me into the right direction but not at all.
after I get the user media, I'm checking in my vue app if the resource is a video or an image and if is a video I show an html5 player where I'm binding the url that is obtained form the public json api. What I'm facing is that the player will not reproduce the video, but if I use the url into the browser, an html5 player is loaded with the related video that will start playing.
The video urls returned are something like this one:
"https://scontent-mxp1-1.cdninstagram.com/v/t50.2886-16/117420353_635186773777278_7723572524374891239_n.mp4?_nc_ht=scontent-mxp1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=nI6tYDeag-0AX8MtmoL&oe=5F3C077B&oh=a47046b1aabf223f16c4c66526e20e57"
I've tried to remove all the part after the .mp4 file extension but this will not work, so I suspect that all the url is needed. Is there a way that I can use to reproduce video in my app?
After many tryes unfortunately I didn't figured out how to use my own HTML5 player so I've used a simple solution. An <iframe> with the url set will let the vido play into the app, this exclude me from the ability to remove the download button or controls from the player but at the moment it's the only way I can implement to achieve my scope.
(1) Your link works okay for me in a video tag:
<video width="640" height="480" >
<source src="https://scontent-mxp1-1.cdninstagram.com/v/t50.2886-16/117420353_635186773777278_7723572524374891239_n.mp4?_nc_ht=scontent-mxp1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=nI6tYDeag-0AX8MtmoL&oe=5F3C077B&oh=a47046b1aabf223f16c4c66526e20e57"
type="video/mp4">
</video>
(2) It even works okay in this random demo that uses vue.js.
With no demo page of your problem the solution is a guess...
Make sure that your own site URL starts https:// or else change the video src to http://...etc.
Make sure your server (settings?) isn't somehow blocking you from loading the file.
If still failing, show us the problem via some link to your testing page.
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.
I have an embedded HTML5 video which works fine in all browsers (or fails gracefully, if the browser is old or lacks video support). But since my site uses iDangerous Swiper (http://www.idangero.us/sliders/swiper/api.php), the custom video controls - the 'play/pause' button - does not work in Internet Explorer 10.
If I remove the swiper js code embed from the head area of my HTML, the embedded video plays fine in ie10. The problem seems to be that Swiper is intercepting the click on the play button in ie10 - and therefore the solution seems to be to disable Swiper for at least that small area of the page.
But it's not clear how to do it.
There seems to be a very scantly documented new feature in the June 2013 Swiper release which lets one create a 'noSwiping' class, but wrapping the video in a div with this class does not solve the ie10 problem.
Has anyone else needed to disable Swiper for an element and succeeded in doing so, particularly regarding ie...? I would be very glad to see a code example. My own project is still on localhost.
All you have to do is to add the html5=1 in the src attribute of the iframe :
The video will be displayed as HTML5 if available, or fallback into flash player.
you can read this:
Force HTML5 youtube video
I had a problem with a embed video of youtube inside a dangerous swiper, but the solution of TSL works for me!
I had added the html5=1 and solve my problem!
thanks!
I'm trying to get an HTML5 video element to autoplay on a Samsung Smart TV (in the regular browser, not specifically as a TV app, if that makes any difference). Perhaps the autoplay element just doesn't work - I have tried all of the following.
autoplay="true"
autoplay="autoplay"
autoplay=autoplay
The video element will play fine manually (once you have managed to point the cursor on the incredibly tiny play control!)
Has anyone else got this to work?
This should work:
<video id="video" src="movie.mp4" autoplay="autoplay" width="320" height="240">
Your browser does not support the video tag.
</video>
At least the documentation says that:
http://www.samsungdforum.com/upload_files/files/guide/data/html/html_2/reference/HTML%20Specification.html#HTML5%20and%20Samsung%20Smart%20TV%20SDK
If the autoplay attribute won't work, still you can start it using JavaScript. Just try to call the play() method:
var myVideo = document.getElementById("video");
myVideo.load();
myVideo.play();