I recently have been chatting to the wonderful Sue Novak. If you don’t know Sue, she is a Senior Technical Writer that looks after Oracle Intelligent Advisor. If you’ve ever been on the Forum or dealt with the documentation then you probably have met Sue. We were chatting about the changes to the way that YouTube videos can be embedded into web pages (and thus, into Oracle Policy Modeling interviews).
The basic upshot is that you need to use the YouTube Iframe API. This API is asynchronous and once it is loaded you can then use the API methods to play, pause, stop and otherwise do things to your video. It offers a good deal of control over the display and behaviour.
The only other thing that you have to take into account is the Debugger. It won’t like the way the API does things with the DOM in Internet Explorer 11. So you can add code to make sure that the video doesn’t play in the Debugger – and perhaps leave a message to say that you need to open the interview using Ctrl+F5 to see it in your real browser, or deploy it to be able to to play it. One final tweak – Chrome will not autoplay the YouTube video unless it is muted – so we do that too. Here is a simple example:
OraclePolicyAutomation.AddExtension({
customLabel: function (control, interview) {
if (control.getProperty("name") == "Video1") {
return {
mount: function (el) {
is_IE11 = isIE11();
if (!is_IE11) {
//Build the DIV which will be grabbed by the API
var div = document.createElement("div");
div.id = "player";
div.style.visibility = 'visible';
div.style.height = '500px';
div.style.width = '870px';
el.appendChild(div);
// Call the API and load it
var script_tag_addition = document.createElement('script');
script_tag_addition.setAttribute('src', 'https://www.youtube.com/iframe_api');
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(script_tag_addition, firstScriptTag);
var player;
} else {
// Display a message and let the user continue
var div = document.createElement("div");
div.id = "noplayer";
div.style.visibility = 'visible';
div.style.height = '200px';
div.style.width = '700px';
div.innerHTML = '<b>Unsupported Browser!</b> This video will not display in this Debug mode browser.
View in Ctrl+F5 with your default browser eg. Chrome, Firefox, Safari, and Edge.';
el.appendChild(div);
}
},
update: function (el) {},
unmount: function (el) {
if (control.getProperty("name") == "player") {
// console.log("Starting name:xVideo customLabel UnMount");
var xVideo = document.getElementById("player");
xVideo.parentNode.removeChild(xVideo);
// console.log("Ending name:xVideo customLabel UnMount");
}
}
}
}
}
})
function onYouTubeIframeAPIReady() {
window.YT.ready(function () {
player = new window.YT.Player("player", {
height: "390",
width: "640",
videoId: "STCgGTMsHl0",
events: {
onReady: onPlayerReady
},
playerVars: {
'mute': 1
}
});
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
let isIE11 = (function () {
let isIE11 = !!window.MSInputMethodContext && !!document.documentMode,
ua = window.navigator.userAgent;
if (ua.indexOf("AppleWebKit") > 0) {
return false;
} else if (ua.indexOf("Lunascape") > 0) {
return false;
} else if (ua.indexOf("Sleipnir") > 0) {
return false;
}
array = /(msie|rv:?)\s?([\d\.]+)/.exec(ua);
version = (array) ? array[2] : '';
return (version === "11.0") ? true : false;
});The result is something like the effect you can see in this YouTube video (below) and the screenshot here.
Hope it is useful and helps you embed more YouTube in your interviews.
This is the second example of how to get video into Oracle Policy Modeling interviews, and if you don’t need YouTube then check out the other example here, which uses a modern HTML5 video tag to embed a video sitting on a server (but not YouTube).
Between these two examples you should be able to fill your interviews with useful content. Sometimes video really is the best option for getting your message across.
More articles about Extensions: