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>
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 am using <video> tags to show multiple videos on my web page.
Videos are playing randomly with different tags. Video of one tag is playing in another video tag other attributes of <video> tag remain proper, only content of the video swap with others
<video id={"video-"+ this.props._id} width="100%" controls preload="metadata" poster={this.props.poster}>
<source src={this.props.url} type="video/mp4 " />
</video>
There are multiple such videos and all play randomly. In inspect element URL and other attribute are fine.
Using Preact.
Why is this happening? Thanks.
I solved this problem with help of one guy.
I reloaded the video src, below code works fine for me
ComponentDidUpdate(){
let video_el = document.getElementById("<video-element-id>") // get reference
video_el.src = new_src // change src
video_el.load() // <-- bug fix
}
I want to play amazon, youtube and itunes video using single tagcin html.
Suggest me if any easy tag available in html.
Thanks in advance.
You can use video tag in html
Reference : https://developer.mozilla.org/en/docs/Web/HTML/Element/video
We have semantic tags in HTML 5 for different purposes. You can use video tag to embed video in your HTML content like this -
<video width="320" height="240" controls>
<source src="PATH_TO_VIDEO_FILE" type="video/mp4">
</video>
There are several attributes available for video tag -
src : Source of your video
controls : Provides control in your video player
loop : After ending, video will restart automatically
preload : To preload the video.
You can learn more about the video link here -
https://developer.mozilla.org/en/docs/Web/HTML/Element/video
Alternatively
You can use iframe like this -
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
On the front page of this website, there is a sticky post titled "National Radio Advertising Campaign ForACURE" which contains the following HTML:
<embed type="audio/x-wav" src="http://www.foracure.org.au/wp-content/uploads/FOR-A-CURE-RADIO-Daniel-45sec.mp3" autoplay="false" height="20" width="200" autostart="false">
However, when I load this website in Chrome v31.0.1650.57 m, the audio plays automatically, even though both autoplay and autostart are set to false.
Is there a better cross browser method of embedding this audio?
Chrome doesn't seem to understand true and false.
Use autostart="1" and autostart="0" instead.
Source: (Google Groups: https://productforums.google.com/forum/#!topic/chrome/LkA8FoBoleU)
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
Remove autoplay
if you want to disable auto playing video.
Just set using JS as follows:
<script>
var vid = document.getElementById("myVideo");
vid.autoplay = false;
vid.load();
</script>
Set true to turn on autoplay. Set false to turn off autoplay.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_autoplay
None of the video settings posted above worked in modern browsers I tested (like Firefox) using the embed or object elements in HTML5. For video or audio elements they did stop autoplay. For embed and object they did not.
I tested this using the embed and object elements using several different media types as well as HTML attributes (like autostart and autoplay). These videos always played regardless of any combination of settings in several browsers. Again, this was not an issue using the newer HTML5 video or audio elements, just when using embed and object.
It turns out the new browser settings for video "autoplay" have changed. Firefox will now ignore the autoplay attributes on these tags and play videos anyway unless you explicitly set to "block audio and video" autoplay in your browser settings.
To do this in Firefox I have posted the settings below:
Open up your Firefox Browser, click the menu button, and select "Options"
Select the "Privacy & Security" panel and scroll down to the "Permissions" section
Find "Autoplay" and click the "Settings" button. In the dropdown change it to block audio and video. The default is just audio.
Your videos will NOT autoplay now when displaying videos in web pages using object or embed elements.
Just change the mime type to: type="audio/mpeg", this way chrome will honor the autostart="false" parameter.
I had assumed that autoplay="false" applied to all other browsers, besides Chrome, so I added
autoplay="false" autostart="0"
to each video tag. With six videos on the page it was a tower of bable (didn't work).
The solution is to remove autoplay entirely and just add
autostart="0"
to each video tag. This worked for Chrome, Firefox, and MS Edge.
Apparently the lack of an autoplay attribute is sufficient for the other browsers.
This will prevent browser from auto playing audio.
HTML
<audio type="audio/wav" id="audio" autoplay="false" autostart="false"></audio>
jQuery
$('#audio').attr("src","path_to_audio.wav");
$('#audio').play();
<embed ... autostart="0">
Replace false with 0
I removed "autoplay" and "autostart", it worked
This is my code:
<video width="427" height="240" controls >
<source src="/abc.mp4" type="video/mp4">
</video>
add attribute controls to video tag. It worked on my code
the below codes helped me with the same problem.
Let me know if it helped.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="YOUR AUDIO FILE" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
The problem is your plugin. To solve this is to only enter this address:
chrome://flags/#enable-NPAPI
Click activate NPAPI, and finally restart at the bottom of the page.
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();