I've been searching the forums here for an answer to this, but each solution seems a bit off from what I'm actually experiencing.
Is there a way to make all iframe vimeo videos auto play? We’re using vimeo vids (muted) in place of resource glutton GIFs, but it looks like only one video auto plays, while the others do not, even though they’re all set to auto play and loop.
It’s also odd that it chooses randomly which video it’s going to auto play, and which ones it doesn’t.
Thanks for your suggestions!
https://stable.stable-demos.com/what-we-do/
You can achieve this by using the parameter ?background=1. As stated here...
Adding this parameter will have the following effects:
All player toggles and elements will be turned off (including the play/pause button!)
The video will automatically loop.
The video will be set to autoplay.
The video will be muted.
All videos marked with this tag will also play concurrently (example).
Unfortunately, autoplay can be finicky on mobile due to data concerns: autoplay will not work in Safari or Chrome on iOS if low power mode is enabled. There are workarounds to this, but you may want to hide the videos on mobile anyway to improve performance. More information on Autoplay Restrictions and Workarounds can be found here.
You should make sure those Vimeo embed codes contain the autopause=false parameter. If you have multiple Vimeo videos embedded on a page, only one video will be playable at a time.
Each embed code should look like this:
<iframe src="https://player.vimeo.com/video/76979871?autopause=false" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Autopause and other player parameters are documented here: https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters
Related
I know this question may have been asked before, but no good answers were found while I was searching.
I have a website where I want to add a YouTube video. The goal is to have an autoplaying video with sound on. A lot of users recommended using the html tag iframe to embed it, which seemed to work perfectly with autoplaying except for the sound.
Does anyone know a better solution to this? Would it be better to just upload the video to the server and use the video tag?
<iframe
width="100%"
height="100%"
src="https://youtube.com/embed/h4gr8eH7D?autoplay=1&controls=0&showinfo=0&autohide=1&mute=1&playlist=h4gr8eH7D&loop=1"
allow="autoplay"
></iframe>
Supposedly they updated using autoplay=1 to where it had to have mute=1 which makes autoplay work, but with no sound. I saw somewhere someone had used mute=2 to have the audio working, but that didn't work for me either.
The new versions of Chrome prevent any audio from running on a webpage until the user interacts with the page. You CANNOT auto-play a video in a chrome browser unless it's muted and this also applies to videos which you upload to your server. If you'll make the user interact with your page before playing audio, you'll be able to play it.
See also How to make audio autoplay on chrome.
I have a simple HTML5 video embed that displays a blank (white) frame when loaded on iOS. On desktop browsers (including Safari) and Android the first frame of the video is displayed.
I understand that you can avoid this by setting an explicit poster image, but I'm hoping I can avoid having to set up a transcoding service to extract the first frame of the videos. I understand that Apple has probably chosen this route to limit the bandwidth use for mobile users, but in this instance it's just overkill to set up a transcoding service.
I've played around with the preload attribute, but neither setting it to
auto or metadata works. Is there any other way to display the first frame of the video without interaction from the user?
Here is a link to a pen where I am illustrating the problem.
https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr
And here is a screenshot of how the code is rendered on iOS simulator (same on real hardware) and in Chrome respectively.
You can use Media Fragments URI
Just Append #t=0.1 to the end of the video URL
Try following code. This is work for me
<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
<source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
I'm pulling instagram videos (urls) from the api and displaying them within an iframe. All works but I can't get them to not autoplay on page load. Inspecting the source, there's a video element with the autoplay attribute but I can't (as far as I know) do anything about it programmatically.
Is there a way to achieve what I want? I've tried decorating the iframe with autoplay="false", etc. with no success (I'm sure the video element takes precedence...).
I've never dealt with Instagram before, but a quick Google search led me to this article: http://thenextweb.com/facebook/2013/10/11/instagram-longer-lets-users-disable-video-autoplay-small-important-step-towards-ads/. It's from 2013, but it seems that you can't disable the autoplay function.
From my knowledge. You can't disable video autoplay using and <iframe>, but you can if you use <video>.
This is my first time implementing a video within a website. I have uploaded the website to vimeo and was going to use that as my host, however I DO have the video on my server also. There are a few things about the vimeo hosting that I do not like. eg. the buttons and the outro of recommendations that they include, but I absolutely love how their code positions the video on the page, full width etc.
Below is the code I took from the vimeo developers page and it works great. This may be a really stupid question but could somebody show me how to adapt the code for a self-hosted video.
<li>
<iframe src="http://player.vimeo.com/video/114867351?api=1;title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
Within your answer could you also advise as to whether you would host your own video or use a website like Vimeo to host, as I am not sure what to do for the best.
This will be removed when the question is answered but here is a livelink to page with the video included.
HTML5 can support videos directly.
<video controls autoplay style="whatever css styles you fancy go here.">
<source src="yourvideo.mp4" type="video/ogg">
Your browser does not support HTML 5.
</video>
That's pretty much it. It will not however work with older browsers.
I wouldn't do this, because it will use up your bandwidth and put unnecssary stress on your server. Otherwise, fine. E.g. if you have a high-end dedicated server and you're not expecting to get a surge of users at any one point in time, then it should be fine. Otherwise, you're better off hosting externally.
Another benefit of hosting on Vimeo is that it does all the donkey-work for you in terms of getting a responsive video container and making sure it works with the maximum number of devices possible.
There is no wrong way of doing it - It just depends on what you're trying to achieve, what your server is capable of, and what your users are like.
This code works for a moment but i think the links changes, cause the next day it is not found?
the video played under Firefox/Chrome/Opera... how to make the video tag play this video permanently?!
<video width="480" height="270" controls="controls" style="color:green;">
<source src="youtubelink" type="video/mp4">
<source src="youtubelink" type="video/ogg">
<source src="youtubelink" type="video/webm">
Your browser does not support the video tag.
</video>
There isn't really a reliable way to actually play a YouTube video inside a real video tag. YouTube doesn't want you doing that, and it's probably against their TOS. In any case, that URL is probably going to change regularly, whether YT adjusts their infrastructure or they go out of their way to stop people from directly accessing the video files.
However, there are a few steps you can take to be able to do just about everything you could do if you were using the video tag. To start, you can add the "html5=1" hint to the embed, which will tell youtube to use html5 video instead of Flash (it usually complies, but not always). The video will be in an iframe, but you can apply all the usual CSS tricks to that iframe - opacity, transforms, etc.
If you're using the YouTube API, add html5: 1 to the playerVars. If you're just doing a straight iframe embed, add it to the query string like this:
http://www.youtube.com/embed/okqEVeNqBhc?html5=1
Now, if you want to go one step further, Popcorn.js now has a nifty wrapper object for the YouTube API that will make a YouTube (they have one for Vimeo too) video behave like an HTMLVideoElement, with most of the same properties, methods and events. It isn't perfect, but it's pretty good.
Note: The official source for that file is on the mozilla/popcorn-js repo, but this one is currently ahead with bug fixes and features. You need to include the latest version of Popcorn.js and wrappers/common/popcorn._MediaElementProto.js from that repo. Make sure you add &html5=1 to the YT URL when you set the src.
The differences you'll notice are:
Even with the wrapper, the HTML5 video API just performs a little bit better than the YT API. e.g., more responsive and better reporting of buffering.
You can't get rid of the YouTube icon in the lower right corner that shows up on pause or mouseover.
You can't keep YouTube from showing ads.
You can't access the actual video/audio content for things like the Audio API and canvas/webgl drawing. But you couldn't do that anyway because of cross-origin restrictions.