Exist any posibily to put to video player HTML5 as source a video from youtube?
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I want to embed videos from youtube using HTML5 player. I've tried this solution but it's not working.
TRY USING IFRAMES instead of <video>. I'ts not possible to embed youtube videos using HTMl5 video tag.
Try this it will work
<iframe type="text/html"
width="320" height="240"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>
Your options are outlined in the Developer API for youTube here: https://developers.google.com/youtube/player_parameters
There are restrictions on what you can/can't do with the content they are hosting (they are, after all, paying for storage, bandwidth, transcoding etc), so if you need more flexibility you will need to find your own video hosting solution
Related
I am trying to load this in a video tag but it is not loading. If I go to the link directly on my iPhone or android phone it will play without problems.
<video width="400" controls>
<source src="http://vod.ak.hls.ttvnw.net/v1/AUTH_system/vods_2f44/asiagodtonegg3be0_17169379616_331512496/high/highlight-22030149-muted-Y56G7SNUCG.m3u8" type="video/mp4">
Your browser does not support HTML5 video.
</video>
The correct type is application/x-mpegURL or vnd.apple.mpegURL
I want to play .mov video like as this, but video doesn't play in any browser.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mov">
</video>
You can use below code:
<video width="400" controls autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
this code will help you.
Instead of using <source> tag, use <src> attribute of <video> as below and you will see the action.
<video width="320" height="240" src="mov1.mov"></video>
or
you can give multiple tags within the tag, each with a different video source. The browser will automatically go through the list and pick the first one it’s able to play. For example:
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>
If you test that code in Chrome, you’ll get the H.264 video. Run it in Firefox, though, and you’ll see the Ogg video in the same place.
Unfortunately .mov files are not supported with html5 video playback. You can see what filetypes are supported here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
If you need to be able to play these formats with your html5 video player, you'll need to first convert your videofile--perhaps with something like this:
https://www.npmjs.com/package/html5-media-converter
Content Type for MOV videos are video/quicktime in my case. Adding type="video/mp4" to MOV video file solved issue in my case.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
in the video source change the type to "video/quicktime"
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/quicktime">
</video>
You can use Controls attribute
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
My new answer is to use ffmpeg to transcode the .mov like ffmpeg -i sourceFile.mov destinationFile.mp4. Do same for the webm format.
OLD Answer:
Here's what you do:
Upload your video to Youtube.
Install the "Complete YouTube Saver" plugin for Firefox
Using the plugin in Firefox, download both the MP4 and WEBM formats and place them on your Web server
Add the HTML5 Video element to your webpage per MDN's recommendation
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
Style the <video> element with CSS to suit your needs. For example Materializecss has a simple helper class to render the video nicely across device types.
I want to view video on amazon cloudFront but it is not shown
<video id="video1" controls width="270" autoplay>
<source src="http://d191za0n1uuhbv.cloudfront.net/2/testing - 14.mp4" type="video/mp4">
</video>
I have changed the Content-Type and Content-Disposition as per the thread How do you configure S3 and Cloud Front to stream HTML5 video? Tried everything but still no luck
I also made the video public but also it didn't work
I also tried puting it this way but did not work either
<video id="video1" controls width="270" autoplay>
<source src="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4" type="video/mp4">
</video>
Am I missing anything?
The code you posted works perfectly. Are you sure the browser supports the video tag? Check http://caniuse.com/#search=video
You should always aim to support most browser and unfortunately HTML5 is not well supported yet. You can provide fallback solutions inside the video tag.
I.e.
<video id="video1" controls width="270" autoplay>
<source src="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">
<object type="application/x-shockwave-flash"
data="player.swf?file="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">
<param name="movie" value="player.swf?file="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">
Download the video
</object>
</video>
Basically HTML5 capable browser will use the native video. Other browser will try to use the plugin. If it doesn't work either you can provide a download link.
YouTube allows people to embed their videos. How do I make this feature for my videos? Looking for guidance or a tutorial because I don't have a clue.
Youtube gives an iframe with src pointing to a page that contains only a video.
<iframe width="560" height="315" src="//www.youtube.com/embed/1PtR6qtdi1s" frameborder="0" allowfullscreen></iframe>
Do you see that src is equal to? http://www.youtube.com/embed/1PtR6qtdi1s
Got it?
In HTML5 you can use the video tag.
<video width="320" height="240" controls>
<source src="src/to/video.mp4" type="video/mp4">
Your browser doesn't support HTML5 VIDEO!
</video>
Change values to desired width, height, src and video type (it supports mp4, webm and ogg).
I want to play video's using the HTML5 <video> tag and fancybox, with the links directing to youtube videos?
here's my code so far
<video width="480" height="270" controls="controls" poster="../images/youtube-logo.png">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/mp4">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/ogg">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/webm">
Your browser does not support the video tag.
<iframe width="480" height="270" type="application/x-shockwave-flash"
src="http://www.youtube.com/embed/1y8dYlBWOh4?wmode=opaque">
</iframe>
</video>
As you can see i also added an iframe tag to support older browsers.
But after some tweaking i can't get fancybox to open everything, in any of the videos in the video tag??
Thanks in Advance!
The direct YouTube links are 'refreshed', although they work for a moment the next day, they no longer work, cause the links are 'broken'.
the best way to play youtube videos in html5 is like so
<iframe width="480" height="270"
src="http://www.youtube.com/embed/1y8dYlBWOh4?html5=1">
</iframe>
the html5=1 tells Youtube to use html5 to play the videos, and NOT flash!