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.
Related
Problem
I'm having videos on a webpage that show the first frame of the video and on hover play the video with a length of around 10 seconds and a resolution of around 720p. I thought of just uploading them to my provider's FTP storage. But then thought that they surely don't use CDNs to deliver content.
So my next thought was using something like Vimeo, Cloudinary, MUX...
I now have seen that I could add videos on a webpage with HLS (m3u8). But I've never done that before so I read my way through these streaming formats.
After that, I'm really unsure what to use in my case as it seems that HLS or DASH is usually more performant than downloading the whole file.
Vimeo for example would give me the option to get a direct link to the .mp4 or HLS.
I'm not seeing a video when using a standard tag. But I found articles that say HLS is now supported in every major browser.
Would you recommend going for such a use case with HLS or Dash and if yes what's the best way to implement it?
What I've tried
<video width="320" height="240" controls>
<source
src="https://player.vimeo.com/external/734323487.mpd?s=234"
// type="application/x-mpegURL"
/>
Your browser does not support the video tag.
</video>
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 video that I would like to embed in an O365 website using HTML5 embeding code. When I insert it, the video works fine but as soon as I click save the video area is just a black box and I can't play it. If I click to open it in another window it does play fine though for some reason.
The code I am using is the following:
<video width="320" height="240" controls>
<source src="my video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Any idea why this would be happening?
While my questions remains valid as I don't know why it is happening, I found a work around for anyone having the same issue.
Rather than inserting the html embed code I inserted a media web part which was much easier and worked! I recommend this route!
I'm trying to get an MP4 video playing in an email via HTML tag. (code below).
This code has been taken and adapted from a trusted source (http://www.emaildesignreview.com/email-design-best-practice/html5-video-in-email-1149/), however said source states that it should play on iPad/iPhone.
At the moment, I can only get it to play on Apple Desktop mail and Hotmail(now outlook).
The iPad/iPhone recognise this as a media file, but refuse to play it. Is there something wrong with my code, is there something missing?... or is the world just not ready for this yet?
Thanks
<video width="328" height="242" poster="backup.png" controls="controls">
<source src="videosource.mp4" type="video/mp4" />
<img src="backup.png?1363867422" width="328" height="242" />
</video>
I've done a fair bit of testing with HTML5 video, and unless you're just sending to people you know will open with iOS devices, it just isn't worth the hassle at the moment.
I wrote this a while back and the same thing is still very much true: http://jacques.corbytue.ch/blog/html5-video-in-email-one-step-closer/
As far as your code, try using absolute URL's instead of relative ones.
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.