Playing video in OSWeb
Hi all,
I noticed a few comments on here in the past about playing video inside OSWeb. While it's a hack, it is possible to hide the main display with JavaScript and insert a HTML <video> element, which then plays. This won't work for every use but will hopefully be ok for some purposes, e.g. an instructional video about the task.
In an inline JavaScript item, add the following to the Run phase:
// hide everything else
var main = document.getElementsByTagName("main")[0];
main.style = "display: none";
// create video
var video = document.createElement("video");
video.src = "https://example.com/static/sample_video.mp4";
video.alt = "If you can see this, the video is still loading, please wait.";
video.addEventListener(
'ended',
function (e) {
// delete the target and re-enable main one second later
window.setTimeout(
function () {
e.target.remove();
main.style = "";
},
1000
);
}
);
document.body.appendChild(video);
video.play();
This will fetch the video from elsewhere so you'll have to find somewhere to host it (ideally something responsive that doesn't throw up extra stuff to the user before a file's downloaded, so not Dropbox, WeTransfer, YouTube etc. -- ask your local tech support about this). Substitute the link
https://example.com/static/sample_video.mp4
with the link to your video.
The next item after this inline JavaScript should be something that waits, like a sketchpad waiting for a keypress. This is because in the background OSWeb will have moved on, though you can't see it because it's hidden.
Hope this is useful! I tested it with Firefox and Chrome, other browsers may vary so test before you rely on it.
Comments
Hi @alisdt,
Thanks for this! Nice one! Finally got a chance to try it out (using a video hosted on Github - using the link to the raw file) and it works perfectly (tried it with Chrome and with Edge). Very useful to present experiment intros or outros!
Great work!
Best,
Fabrice.