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.
Related
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>
I have built a site that has a background video and looking to improve on the user experience. Currently all text elements load before the background video does. What I want is for the video to load first before the text does, how can i achieve this? Below is the css and html snippet I'm using. You can also use this test url to view the site http://www.convenantkingsandqueens.academy
video.fullscreen {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
<header id="page-top" class="header">
<div class="container">
<div class="text-vertical-center">
<img src="images/tmw_logo.png" class="img-responsive logo_img" alt="Timeline Media Workx Logo" style="height: 200px; width: 450px;">
<video class="fullscreen" src="videos/bkg/sample.mp4" autobuffer autoloop loop autoplay></video>
</div>
</div>
</header>
The preload attribute specifies if and how the author thinks that the video should be loaded when the page loads.
The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.
<video class="fullscreen" src="videos/bkg/sample.mp4" autobuffer autoloop loop preload="metadata"></video>
Note: The preload attribute is ignored if autoplay is present. It does not work in IE browser
i'm struggling to get a responsive iframe but so far nothing..
I use the following css and html.thanks in advance.
.testme_container {
position: relative;
height: 0;
overflow: hidden;
}
.testme_container-16x9 {
padding-bottom: 56.25%;
}
.testme_container-4x3 {
padding-bottom: 75%;
}
.testme_container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="testme_container">
<iframe src="http://www.gmail.com" allowfullscreen></iframe>
</div>
Could you try to explain in detail what you want to achieve?
I tried your code and judging by the names of your CSS classes (16x9, 4x3) it seems to work fine, however, you will have to use a different URL to test it:
<div class="testme_container testme_container-4x3">
<iframe src="http://www.w3schools.com/" allowfullscreen></iframe>
</div>
DEMO
The reason www.gmail.com doesn't show up is, because Google doesn't allow it to be displayed in an iframe. If you look at the jsfiddle you can see, I did not change anything about your code but the link and I added the class "testme_container-4x3".
This JavaScript function relies on jQuery to make all iframes on the page responsive. It handles video embeds to preserve their aspect ratio without extra vertical or horizontal margin but you need to determine the aspect ratio you'll be using in your embedded video.
https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8
You can actually do this in native javascript without any need to rely on jQuery or other framework/library. Responsive Iframes would work perfectly for this.
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.
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; }