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.
Related
I am currently working on a web page with a silent video banner.
I am using the aXe Chrome browser plugin that highlights potential accessibility issues with the content of the page and it's throwing two issues related accessibility for the video element:
Ensure <video> elements have captions
Ensure <video> elements have audio descriptions
I just wanted to know if there are any recommendations in communicating that the video element has no audio in an accessible way.
video accessibility has two concerns : captions for replacing sound, and audio decription (or textual alternatives) for describing the images.
The fact that your video is silent does not mean that you do not need a textual description of what appears in the video.
In your case, I would look at the attribute controls="muted" which can be an hint for indicating assistive technologies that a video does not have currently any sound.
I will choose between one of the following:
a) I will set the aria-describedby attribute on the video element to point to the div containing the description.
b) OR If your video is only decorative, then I would set the aria-hidden=true attribute on a parent element
I have an audioless video implemented using HTML5's <video> tag. I'm trying to find out if auto-playing the video and automatically looping it (assuming I add a button to remove loop as well) would cause accessibility issues? I know there are rules regarding audio as well as video with audio that prevent you from doing that, so I'm also wondering if this video is practically considered a GIF.
The video can be found here for reference:
http://www.med.uottawa.ca/bmi/eng/lee.html
This is technically an accessibility violation if it plays for more than 5 seconds. It affects users with disabilities such as attention deficit disorder. You need to provide a button to stop the video from playing immediately, not only a button that disables the automatic loop.
I am going for a most simplistic playback of background audio. I don't even want to capture media controls or anything. I just want to start the app and play audio until I explicitly close it. That is, it should play audio while hidden.
I used this article and this question as reference and I followed their guidance:
<MediaElement Name="someMedia"
AudioCategory="BackgroundCapableMedia"
IsLooping="True"
Source="Assets/some.mp3"
AutoPlay="true"/>
Also, I added Background Tasks to my Package.appxmanifest's Declarations, checked Audio and set the start page. What am I missing?
You should also enable SystemMediaTransportControls and handle two events on it and on your MediaElement to keep them in sync.
Check this article:
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj841209.aspx
I would like to disable the option to move back in playing video while using HTML5 video tag
You can:
Add the controls attribute the the tag. In this solution, you can't control the buttons that will appear in the UI.
Not use the control attribute, but write your own UI (buttons, input type range, ext) that call JS api - play(), pause() methods (and more)
With or without the control attribute, write your own event listeners that will listen to the events and do whatever you want (for example, seek the video to specific time)
Resources and examples:
w3schools - video/audio
html5 seeking
Using HTML5 audio and video
Input types
I want to create a html5 page with video and an image overlay - meaning some image that is showing over the video. This overlay will in time also be text in some cases. Is there any good way to achieve this?
What I've been trying this far is to use a <video> tag to hold the video, and draw the image into a canvas, which I place on top of the video. To show it I need to move the video back setting z-index to -1, but then the video controls won't work. Maybe there's a solution to make the controls work again, but I'm not sure if I'm on the right path here.. I am assuming there is a recommended solution to this. Maybe using a canvas which I fill both video and overlay into. Or something completely different?
Note: I edited the question as it originally pointed in the wrong direction regarding what was important here. I'd love to have a solution which makes this work seamlessly in fullscreen and everything, but the focus is: What is the appropriate way to place items on top of video - in html5?
Achieving what you want and have it supported in out-of-the-box fullscreen is problematic. Fullscreen support in html5 video is only optional and in any way not accesible thorugh the API (See discussion here).
Even if you used the built in fullscreen there is no way you could inject content above it unless you are willing to change the video file itself on the server in runtime.
what you can do however (And what I did in a similar case) is to implement your own video controls, run the video tag without the built in controls, and have fun with overlaying as many layers as you want on top of your now out of focus video.
As for fullscreen, you can implement some sort of custom background fullscreen similar to what's been done here
edit: The problem you're having by placing a canvas over the video is blocking the built in html video controls. My suggestion is to implement your own video controls (play, pause, volume, seeker, etc.) using html and javascript calling the video API. You can probably even make it prettier then the ugly built in controls.
Your controls can be contained in a layer above the overlaid canvas, and thus the video will be shown, above it the overlay and above it your control set.
You can read a little about implementing your own controls here or here
And anyway this can easily be much better than this.