Hey,
iv’e recently had to create a header for a client, with video playing in the background. I used the native cornerstone video element. The video was supposed to be muted, running in a continous loop and start by itself once the site has been loaded (autoplay).
In theory, all of the above can be achived by the elements controls, but on mobile devices, iOS in particullar, autoplay wasn’t working.
After some research, i stumbled upon the playsinline attribute mentioned in Apples Developer Documentation.
I found this article on css-tricks.com which explains its purpose quite well:
Mobile browsers, will play the video right where it is instead of the default, which is to open it up fullscreen while it plays.
I then tried to add the playsinline attribute to the video element using the Custom Attributes in cornerstone, but realised, it only adds it to one of the divs surrounding it (wrapper) and that there’s no native way to add it directly to the <video> tag.
Utlimately, i used Javascript to add it globally:
document.getElementsByTagName('video')[0].setAttribute("playsinline", "");
It would be great if cornerstones native controls simply had a “Playsinline”-checkbox just like there’s one for autoplay.
Another great addition would be to have more control of what video controls are actually shown in the front end while video is playing. Right now there’s only normal or advanced controls.
For example: if you want to show the mute button only, you have to activate “Advanced Controls” to then manually hide everything except the mute button using CSS.