I wish to load the playlist.m3u8 before the element is rendered so that when it does render, there will be little to no loading time.
this can happen for instance if the video is in a popup element triggered by mouse hover. in that case, the video Element has not yet rendered, and only when it does, does it start streaming
is there a way to start fetching the playlist files from the CDN and pass it to the video element when it renders?
Related
I have an angular application with a html5 <video> which gets the video source from a url. The problem is that for apparently no reason, at some point the video stops playing and shows itself as loading and stays at that same point for a few minutes and then resumes playing. I haven't provided the code because it is just the video and a condition to check if the video time is inside the wanted fragments, as some parts should be skipped (When it is not the time jumps forward). The video is played inside a modal, and it is not a connection problem
I am developing an application where I need to display some animation in the canvas along with the video as a separate element, for the same I need to maintain the synchronisation between two DOM elements very precisely.
I was thinking of playing the animation as video tag plays the video. Is there any way I could see how the html5 video tag is implemented?
Theoretically, each browser can have their own implementation of the video tag. Besides of that, they will try their best to follow some rules specified by w3.org
This is the video tag draft:
https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video
If yout want to sync something with a video you will want to use some video tag events:
https://www.w3.org/2010/05/video/mediaevents.html
A timeupdate event listener can be set on the video which will allow you to synchronize other elements on the page with the video as it plays. Video elements have many other events in addition to timeupdate, such as play, pause, and seeking.
The implementation of video elements will differ depending on the browser and may not be completely public, such as how they work with DRM.
I have a black square displaying for a second whilst my video loads. How can I stop this from showing on my page? (websites.cx/video.html)?
I'm using the html5 video attribute.
I've declared MP4 ogv mov in my htaccess file.
There are a couple of approaches that could be used here-
Use the poster attribute of the video element to set an image that will be shown in place of the video until the video loads (the specification actually states until the first frame is available).
The poster attribute gives the address of an image file that the user agent can show while no video data is available.
Be aware that this will involve an extra HTTP request and as such may not be significantly advantegous in the event of a small video file and/or large placeholder image. You could mitigate the effect of the extra HTTP request by prefetching the image, using a cached image, or simply ensuring you are using a well optimised image that is appropriately sized for the space you are displaying it in.
Set the visibility property of the element to "hidden" through a class which you remove after the load event of the video element has fired (you would need to subscribe to/listen for this event when the DOM content has loaded). I am suggesting use of the visibility property rather than display (or use of the global "hidden" attribute) as the video will still take up the defined amount of space on the page - preventing a "flash of restyled content" and re-arranging of the content around the video after it loads.
I'm building a website where you can open a modal view with a video-tag for the users web cam video.
Now I'm wondering what happens to my video stream/the content of the video-tag when the user closes the modal view (the view is hidden via display: none).
Is webRTC still running? Are the resources still reserved?
Thanks
Yes, even if you don't attach the received stream to any media element, the stream is still being played. This is valid for remote and local streams. Of course, if it has audio, you will only hear it when it is attached to a media tag (audio or video).
You can even remove media elements from the page. When they get back on dom, if you attach the stream, they will continue to play.
I guess this in not only related to the <video/> tag… I’m working on a jQuery-based app that dynamically loads static HTML pages and injects them into the DOM. Amongst these, there is a page with flash video markup plus a HTML5 video fallback.
When I load this in FF and wrap it in $() (not adding it to the DOM yet!) for easy DOM selection, Firebug indicates that all resources (video files, SWF files, images, etc.) get downloaded, plus the HTML5 fallback starts autoplaying and thus creates a ghost sound: no video to see, but playing back somewhere in oblivion.
How can I prevent this all from happening? I've already tried with .text() and .html() but without success.