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.
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'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
I have a video.avi file and and html page on a server, and I would like to "embed universally" my video inside the html so that people could see it. By universally I mean in a way where I would be the less dependent on browsers/video viewers the viewers could have. In fact (I am dreaming for sure) I would like everyone with every "decent" "recent" browser to be able to see it...
I know how noob it sound, but I had a working html code who stopped doing the job a couple of weeks ago (the video does not appear anymore) and I would like to solve the issue once for all...
(I don't want to upload my video to youtube and to embed a youtube video though.)
I indeed opted for :
<video width="1020" height="310" controls>
<source src="myvideo.mp4" type="video/mp4">
</video>
and realized a pretty decent conversion with one of the first freewares I found online, I don't want to advertise for.
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.
Consider the following embed code of this video from Vimeo - Popular video hosting site:
<iframe src="http://player.vimeo.com/video/41321504?title=0&byline=0&portrait=0&color=c8c8c8" width="400" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
the video embed url(http://player.vimeo.com/video/41321504) does open, if open directly in new browser window but doesn't contain location of video anywhere in html source code, thereby preventing downloads,i guess this is a feature of flash DRM. But then, a third-party website comes in & was able to give the direct urls to same video
http://av.vimeo.com/42007/964/95995392.mp4?aksessionid=96d0b8ffbb4c0c04b1c6b7f1562de7d5&token=1343971749_85ce464ec3361604fbda75e38e29f4e8
From a programmers standpoint, i was wondering how does it work? how are these video downloaders able to fetch direct url of the videos which are not even present in html source? what is their process if anyone can explain that step-by-step.
They do server-side analysis of the flash object, which will establish a conection to download the video. That connection can easily be captured. That even works in a browser, with Firebug for example: