I have been trying to play a youtube video in a windows 8 html5 & javascript app with no luck!
I tried copy pasting the code youtube provided for embedding videos in the body of default.html, for example:
<iframe width="420" height="315" src="http://www.youtube.com/embed/k07IaB9yq_U" frameborder="0" allowfullscreen></iframe>
This gives the following error:
The Adobe Flash player or an HTML5 supported browser is required for video playback.
Get the latest flash player
Learn more about updating an HTML5 browser.
when I try using the video tag with the previous link, for example:
<video src="http://www.youtube.com/embed/k07IaB9yq_U" controls></video>
It says an invalid source!
What is the right way to do this?
Thanks
YouTube has a beta program to provide some videos in HTML5. You can join it here . Once you have done that you should be able to embed HTML5 YouTube videos in a WebView control by navigating to the YouTube URL.
Flash videos cannot be displayed in a Metro style app.
Code for the webview control
string htmlFragment =
#"<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>YouTubePagesample</title>
</head>
<iframe width='560' height='315' src='http://www.youtube.com/embed/{YoutubeID}' frameborder='0' allowfullscreen></iframe>
<body>
</body>
</html>;";
this.webView.NavigateToString(htmlFragment);
Use the setInnerHTMLUnsafe method as win 8 apps don't like the external JS being injected in the app. videoPlayer is the div which you want to add the embed to.
var content = '<iframe width="480" height="270" src="http://www.youtube.com/embed/8sPj0Ic8KQ8?rel=0" frameborder="0" allowfullscreen></iframe>' ;
WinJS.Utilities.setInnerHTMLUnsafe(videoPlayer, content);
Related
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'm developing an html5 mobile app...i have to create a page with a YouTube Video and some other elements...i use the iframe code to load the video...
<iframe width="100%" height="auto" src="http://www.youtube.com/embed/VIDEO-ID" frameborder="0" allowfullscreen></iframe>
this works...the problem is when a user doesn't have internet connection...i'd like to present an image...How is it possible?!
Thanks
Assuming you are okay with javascript:
<script type="text/javascript">
if(navigator.onLine!==true)
document.getElementsByTagName('iframe')[0].outerHTML='<img src="blah.png">';
</script>
You can use something else instead of document.getElementsByTagName('iframe')[0] if you have more than one iframe in the page.
I have taken the following iframe code for the youtube video from the youtube itself.
<iframe width=”560? height=”315? src=”http://www.youtube.com/embed/V3oJR5IAMxM” frameborder=”0? allowfullscreen></iframe>
But when i try to embed this video on simple web-page inside a div element. I can see the you-tube player in the web page.But the video is not loading in my webpage. But the same video is playing for me in youtube.
Can someone tell what might be the problem,..
Is the problem with a code or with the browser, i am using mozilla 13.
HiTbmBizz,
Try this instead,
<iframe width="640" height="360" src="http://www.youtube.com/embed/V3oJR5IAMxM?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
Worked for me in HTMLSandbox if you want to test.
Let me know how it goes.
I don't want to embed Vimeo videos in Flash format. How do I embed them in HTML5 format?
On a browser with the Flash Player it loads in HTML5 mode with the following code:
<iframe sandbox="allow-same-origin allow-scripts allow-popups"
id="foo" width="100%" height="90%"
allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""
src="http://player.vimeo.com/video/28544156?api=1">
</iframe>
The sandbox prevents the HTML iframe tag from accessing any plugins including flash.
To allow the vimeo button to open the vimeo web page for the video you need the 'allow-popups' permission. It's not needed to play the video.
They actually enable HTML5 through cookies, so I don't think you can link directly to the HTML5 version. Here's the JS code they use to switch between Flash and HTML5:
function toggle_html5_player(obj, on) {
if (on) {
setCookie("html_player", 1, 365);
} else {
setCookie("html_player", 0, 365);
}
reload_page();
}
Edit:
Also on embedding, the official blog post states:
It only works on Vimeo.com right now, embed code will still be Flash
Edit 2:
Actually, that is an old statement which is not true anymore. The new embeds actually use HTML5 automatically on devices that don't support Flash like the iPad or iPod, if the aforementioned cookie is set.
How do I play a YouTube video in HTML5?
This is probably what you're looking for:
Force HTML5 youtube video
HTML5 video may play if the user has opted in:
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"> </iframe>
HTML5-by-defualt video - notice the ?html5=1:
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID?html5=1" frameborder="0"> </iframe>
The "HTML5" way of doing video would be to use a <video> tag. This post shows that it can be done, but it doesn't look like the best option. Show Youtube video source into HTML5 video tag?
You can also take a look how YouTube does it, opt in at: http://www.youtube.com/html5
If you're using safari, there's an YouTube5 extension that will make all youtube videos into html5 videos.
http://www.verticalforest.com/2010/06/09/youtube5-html5-converter-for-youtube-videos/
Supports videos that youtube does not (videos with ads etc)
You can embed videos effortlessly by right clicking the video on youtube,
copying the embed video option, and pasting it in your html where you want it to appear, The problem with this you wont have control over what is shown in the embed code apart from the clip you are interested in, ie, adverts playlists etc