how to add video in iframe src from project directory - html

I have a video in my Project directory under folder name Video and Video name Sapno.MP4.Now i have to add this Video in my webpage . Currently i have added you tube video in it and it is getting displayed and played properly but now i want to replace it with my local project directory video.
Here is the HTML that i am using..
<div style="position:relative; width: 100%; height: 0; padding-bottom: 56.25%;"><iframe width="420" height="315" src="//www.youtube.com/embed/sP4NMoJcFd4" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
Please help me to get it corrected ..Thanks..

set the SRC attribute to Videos/Sanpo.mp4.
Another option is to use the HTML5 video tag, in which case you will have to use the above source tag anyways.

Related

Is it possible to use <iframe> to show 100% of another website on my site?

Like the title states is it possible to use to show 100% of another website on my site? Without any of the contents from my own site showing?
I tried using a code like this,
<iframe src="google.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
But my own site is still showing up below the contents when it runs out. Please help thanks.
You may try with these css codes.
body {
margin: 0;
padding: 0;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
}
<iframe src="https://www.premierleague.com"></iframe>

Put my video in an HTML tag

I'm recording video from my raspberry with motionEye (for a security system) but if I try to insert them in an HTML page they don't work.
How can I do?
These are motionEye codecs:
https://i.stack.imgur.com/3pDFr.png
And this is my tag video:
<video style="width: 23%; height: 23%; margin-right: 5%; margin-left: 5%; margin-bottom: 5%;" controls><source src="/home/pi/Desktop/video/2018-05-26/14-27-06.mp4" type="video/mp4"></video>
UPDATE
The web page show me these video but I can't play them. With chrome they are gray and with firefox there is a MIME compatibility problem.
Web page and videos are on my Raspberry (with Raspbian), in the same folder.
I think the problem is from the src, try to put the full path of the video.
If you have this video in a Windows computer, then your src should be something like this:
src="file:///C:/Users/{USERNAME}/Documents/home/pi/Desktop/video/2018-05-26/14-27-06.mp4"
If you have the video uploaded to a server:
src="http://{NAMEOFDOMAIN.COM}/{PATH}/{TO}/home/pi/Desktop/video/2018-05-26/14-27-06.mp4"
BTW, if you are encoding video use the most compatible codec: H264 When choosing codecs, file types, means of delivery, etc., always aim for the widest range of users.
Demo
<video style="width: 23%; height: 23%; margin-right: 5%; margin-left: 5%; margin-bottom: 5%;" controls><source src="file:///C:/Users/{USERNAME}/Documents/home/pi/Desktop/video/2018-05-26/14-27-06.mp4" type="video/mp4"></video>

playing udp stream in html video object

According to this page -
http://docs.brightsign.biz/display/DOC/HTML5+Video
you should be able to play a video stream in html just like this right ?
<video src="udp://239.192.1.1:5004" brightsign-properties="StreamTimeout:0;StreamLowLatency:0;">
i have built my html page, and when I inspect it, I have this in my body -
<div id="rightPane" style="position: absolute; top: 20%; left: 50%; width: 50%; height: 80%; background-color: green; visibility: visible;">
<video src="udp://224.0.0.1:9999" brightsign-properties="StreamTimeout:0;StreamLowLatency:0;" style="width: 100%; height: 100%;">
</video>
</div>
however when my page loads I get the error ,
GET udp://224.0.0.1:9999 net::ERR_UNKNOWN_URL_SCHEME
any idea on why it says unknown url scheme? is that page wrong in how I have to specify the udp url or?
thanks for any help.
The tag implementation is browser specific. I doubt you'll find much more than HTTP. I think FireFox supports RTSP.
I'd be surprised if you find wide browser support outside of HTTP.

Background Playlist Youtube Videos

I want to create a playlist background videos from youtube, i have this
HTML
<div id="video"> <iframe src="//www.youtube.com/embed/Fhy6CHZ9dvY?list=PL82A0C437FEE5F6DA?autoplay=1&controls=0&loop=1&rel=0&showinfo=0&autohide=1&wmode=transparent&hd=1" www.youtube.com="" embed="" width="100%" height="100%" frameborder="0"></iframe>
</div>
CSS
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
This code works for one video and stop when the video finish, i want to know any way to play a video after finish the first one automatically, like a playlist.
I tried embeding the playlist from youtube but isn't working.
Add & instead of ? right after the list=PL82A0C437FEE5F6DA.
So the final code should looks like this-
<div id="video">
<iframe src="//www.youtube.com/embed/Fhy6CHZ9dvY?list=PL82A0C437FEE5F6DA&autoplay=1&controls=0&loop=1&rel=0&showinfo=0&autohide=1&wmode=transparent&hd=1" www.youtube.com="" embed="" width="100%" height="100%" frameborder="0"></iframe>
</div>

Flash not displaying in iframe

I have a flash video player that I would like to embed in other pages, so I created an iframe to do this. It has to be an iframe because it depends on other swf files that get loaded into it (plugins).
The weird thing is the video does not play when loaded inside the iframe, but if I go to the html source and cut and paste the tag outside of the iframe it works.
<iframe width="500px" height="500px" src="http://somedomain.com/embed.aspx" ></iframe>
Check your console. If you are also getting these errors:
"Blocked script execution in '...' because the document's frame is sandboxed and the 'allow-scripts' permission is not set."
You can configure those sandbox flags on the iframe
<iframe width="100%" sandbox='allow-scripts allow-same-origin'></iframe>
Got it working by adding come css to the html page containing the flash player. It seems the absolute positioning made all the difference.
html, body, object { margin: 0px; padding: 0px; position: absolute; height: 100%; width: 100%; overflow: hidden; background-color: #000; }