I am using the <video> tag, and I want to use any URL from YouTube in it.
I have this http://jsfiddle.net/wCrNw/ but it's not working.
I have checked this Show Youtube video source into HTML5 video tag? but that is not solving my problem.
<video controls="controls"
class="video-stream"
x-webkit-airplay="allow"
data-youtube-id="N9oxmRT2YWw"
src="http://www.youtube.com/watch?v=OmxT8a9RWbE"
></video>
MediaElement YouTube API example
Wraps the YouTube API in an HTML5 Media API wrapper, so that it can be programmed against as if it was true HTML5 <video>.
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
<script>
var player = new MediaElementPlayer('#player1');
</script>
Video tag supports only video formats (like mp4 etc). Youtube does not expose its raw video files - it only exposes the unique id of the video. Since that id does not correspond to the actual file, video tag cannot be used.
If you do get hold of the actual source file using one of the youtube download sites or soft wares, you will be able to use the video tag. But even then, the url of the actual source will cease to work after a set time. So your video also will work only till then.
The most straight forward answer to this question is: You can't.
Youtube doesn't output their video's in the right format, thus they can't be embedded in a
<video/> element.
There are a few solutions posted using javascript, but don't trust on those, they all need a fallback, and won't work cross-browser.
This would be easy to do :
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Is just an example.
This will give you the answer you need. The easiest way to do it is with the youTube-provided methods. How to Embed Youtube Videos into HTML5 <video> Tag?
According to a YouTube blog post from June 2010, the "video" tag "does not currently meet all the needs of a website like YouTube" http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html
Try this solution for the perfectly working
new YouTubeToHtml5();
Related
I'm new to HTML and need to insert a video from youtube onto my page using an element. I've tried different ways but just cannot get it to work. This is the link: https://www.youtube.com/watch?v=ZSM3w1v-A_Y
<!DOCTYPE HTML>
<HTML>
<head> <title> video </title> </head>
<body>
<object> </object>
</body> </html>
You should not use <object> to display a video. Using <object> for videos is an outdated approach. Use <video> instead
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
if you really want to use <object>
<object data="video.mp4"></object>
Of course, all of this assumes you have the video downloaded. If you want to display the youtube video directly from the youtube link like your example, you will have to just embed the youtube player in your webpage with an iframe. You cannot access the raw video directly from youtube.
<iframe src="https://www.youtube.com/watch?v=ZSM3w1v-A_Y">
EDIT: For clarification, you can link to a video from another source, but YouTube does not expose the raw video itself so this is not applicable to YouTube. Also, you can technically put the YouTube link directly in an <object> as you described, but this will cause a CORS violation and therefore will not load. This also still essentially just embeds the youtube player
I have this really simple html:
<head>
</head>
<body>
<br>
Test
<audio controls preload>
<source src="https://stream11.polskieradio.pl/pr1/pr1.sdp/playlist.m3u8" />
</audio>
</body>
When I paste this directly into address bar of a browser, I'm getting a suggestion to open this in VLC Player.
My question is simple, is it possible to embed this into <audio> tag to be able to play this from a browser?? Because as it is it's just frozen and doesn't play anything...
Any help/suggestion would be appreciated.
Thank you!
According to previous question:
HTML5 audio tag - Handling of m3u8 in chrome/firefox
Seems like these browsers don't support HLS directly. You need to use something like HLS.js to load the video in via MediaSource Extensions
I want to play a video, but it is only downloading.
Here is my code:
<iframe src="videos/1.mp4" width="540" height="310"></iframe>
The Result when the page load is:
How can I play the video with iframe and not with the video tag?
Although some browsers might support this way of importing a video(Using an <iframe>) some browsers will act towards the video as a file and attempt to download it. The correct way to display a video is using the <video> tag:
<video width="540" height="310" controls>
<source src="videos/1.mp4" type="video/mp4">
</video>
See W3Schools tutorial here: video tag simple tutorial
Actually there's nothing wrong with your code!
But the problem is with IDM (Internet Download Manager) as it hooks every link that your browser is requesting and finds whether the destination you're trying to access matches what is in IDM's extensions list, so the first thing would execute after the file being requested is IDM as it has higher priority than your browser and its anyway serving as a listener inside your browser.
you either have to exclude "localhost" from the hook
or you have to remove the mp4 extension from IDM's extension list (which isnt efficient)
Just use the <video><source src="..." type="video/mp4"></video> tags.
An iframe tag is used to display another page, not used to play video. You can not play a video with that tag, whether or vimeo youtube or any other company lets you add video using a "iframe" is because they have previously configured some options on that page and have put a video. And that's why you can insert a video through an iframe.
Now if you want to force this, you should do the following:
Create a html-and in that html implement a video with the
Then from the other page write the <iframe src = "yourwebcontentvideo.html" />
And that would be it.
An iframe is an HTML element that allows an external website or webpage or document(like word, pdf) or video to be embedded in an HTML document.
Here is an example for loading an Youtube video through iframe tag on your site
<iframe width="560" height="315" src="https://www.youtube.com/embed/2d2rfsm3ApU" allowfullscreen></iframe>
Output:
<pre>
<code>
https://jsfiddle.net/anjaneyulu15/og64djL0/7/
</code>
</pre>
Original content is taken from iframeinhtml.com
You can use this, you can use the mp4 url as url parameters and return HTML VideoJS player.
https://simplevideoplayer.bubbleapps.io/
You can generate dynamic content like that:
let ifTest = document.getElementById('if-test');
let videoPath = 'https://file-examples.com/storage/fe63ea2155630fa7ba2b829/2017/04/file_example_MP4_480_1_5MG.mp4';
let videoHtml = '<html><body><video width="100%" autoplay="true" loop="true" muted="true" ><source src="' + videoPath + '" type="video/mp4" /></video></body></html>';
ifTest.setAttribute('srcdoc', videoHtml);
ifTest.setAttribute('style', 'width:264px; height:150px;')
<iframe id="if-test" srcdoc=""></iframe>
I want to add a video into my html code and it should be accessible at least from IE ,firfox and chrome browsers.
The extension of the video is .vob
I have used this code
<object data="../Video/VTS_01_1.vob" height="200" width="200"></object>
But I can't see nothing on the screen juste a square with 200 height and 200 width
Use the <video> element
Use a file format supported by browsers. VOB is not such a format. MP4 and WebM are good choices for different browsers, you should use both
Consider using a library that provides Flash et al fallbacks for old browsers. Examples include video.js and video for everybody
Sample Code:
<video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
<div class="fallback">
<p>................</p>
</div>
</video>
wrapped up the same old <object> and <embed> tags with the new tag .
More info about video tag
Can anyone give a concise instruction on how I can have a flv play from my html page please?
With video.js its very easy. All you need to do is include js & css in head & then use html5 code as:
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480"
data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
<source src="video1.flv" type="video/x-flv">
</video>
</body>
For further details: http://videojs.com/
Actually, I did not find information specified about playing flv files. But it works fine. :)
You can use other video formats using video.js all you need to change is type as...
<source src="..." type="video/mp4">
Moreover, there might some issue regarding your browser, does your browser support the .mp4 format, I could not play .mp4 in chrome, but it works fine in firefox. Try adding more sources with same video in different formats. Like...
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
<source src="video1.webm" type="video/webm">
Wrap a flash player around it, such as Flowplayer. There currently is no other way; browsers can't just render an FLV by itself.
See the installation guide for Flowplayer, taking you step-by-step on how to place the video directly into your HTML.
I'm fairly certain that shadowbox can also play FLV files: http://www.shadowbox-js.com/
It's clean, minimal and fairly simple to setup.
You can try https://github.com/Bilibili/flv.js
With flv.js, You'll get:
Pure HTML5 + JavaScript Video Player for flv videos
Pure HTML5 + JavaScript LiveStream Player for http-flv streams
Flawless experience
Smaller size than H.264 Videos
Flv.js utilizes MSE (Media Source Extensions) therefore it'll only be available on Chrome 43+, Firefox but not Apple / iOS Safari.
Flv.js instantaneously transmuxes flv streams to H.264 streams and then push the H.264 stream to Media Source Extensions. It'll display as a video tag in HTML Element with a blob URL.
Another really popular Flash player is the JW Player, at http://www.longtailvideo.com/ . They have a nice setup wizard that generates the code you need.
Insert an SWF object into your HTML and assign the FLV in the attributes as the video that will play.