137 lines
6.7 KiB
HTML
137 lines
6.7 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>VOD with Mini Player</title>
|
||
<%= htmlWebpackPlugin.tags.headTags %>
|
||
<style lang="css">
|
||
#fluid-player-e2e-case { width: 90%; }
|
||
|
||
body { height: 300vh; background: rgb(131,58,180); background: linear-gradient(0deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); }
|
||
|
||
#setupForm { display: flex; align-items: flex-start; flex-direction: column; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<%= htmlWebpackPlugin.tags.bodyTags %>
|
||
|
||
<div id="setupForm">
|
||
<div><input type="checkbox" name="enabled" id="enabled" checked><label for="enabled">Enabled</label></div>
|
||
<div><input type="checkbox" name="autoPlay" id="autoPlay" checked><label for="autoPlay">Auto Play</label></div>
|
||
<div><input type="checkbox" name="vastad" id="vastad" checked><label for="vastad">VAST Ad</label></div>
|
||
<div><input type="checkbox" name="autoToggle" id="autoToggle" checked><label for="autoToggle">Auto Toggle</label></div>
|
||
<div><input type="number" name="width" id="width" value="400"><label for="width">Width</label></div>
|
||
<div><input type="number" name="height" id="height" value="225"><label for="height">Height</label></div>
|
||
<div><input type="number" name="widthMobile" id="widthMobile" value="50"><label for="widthMobile">Width Mobile</label></div>
|
||
<div><input type="text" name="placeholderText" id="placeholderText" value="Playing in Miniplayer"><label for="placeholderText">Placeholder Text</label></div>
|
||
<div><input type="text" name="position" id="position" value="bottom right"><label for="position">Position (top left, top right, bottom left, bottom right)</label></div>
|
||
|
||
<p><button id="setupPlayer">Show Player</button></p>
|
||
</div>
|
||
|
||
<div id="mountingPoint"></div>
|
||
|
||
<script>
|
||
document.getElementById('setupPlayer').addEventListener('click', () => {
|
||
const enabled = document.getElementById('enabled').checked;
|
||
const autoPlay = document.getElementById('autoPlay').checked;
|
||
const vastad = document.getElementById('vastad').checked;
|
||
const autoToggle = document.getElementById('autoToggle').checked;
|
||
const width = document.getElementById('width').value;
|
||
const height = document.getElementById('height').value;
|
||
const widthMobile = document.getElementById('widthMobile').value;
|
||
const placeholderText = document.getElementById('placeholderText').value;
|
||
const position = document.getElementById('position').value;
|
||
const mountingPoint = document.getElementById('mountingPoint');
|
||
mountingPoint.innerHTML = `
|
||
<video id="fluid-player-e2e-case">
|
||
<source src="https://cdn.fluidplayer.com/videos/valerian-1080p.mkv" data-fluid-hd title="1080p" type="video/mp4"/>
|
||
<source src="https://cdn.fluidplayer.com/videos/valerian-720p.mkv" data-fluid-hd title="720p" type="video/mp4"/>
|
||
<source src="https://cdn.fluidplayer.com/videos/valerian-480p.mkv" title="480p" type="video/mp4"/>
|
||
</video>
|
||
`;
|
||
|
||
const instance = fluidPlayer('fluid-player-e2e-case', {
|
||
layoutControls: {
|
||
autoPlay,
|
||
miniPlayer: {
|
||
enabled,
|
||
width: Number(width),
|
||
height: Number(height),
|
||
widthMobile: Number(widthMobile),
|
||
placeholderText,
|
||
position,
|
||
autoToggle
|
||
}
|
||
},
|
||
...(vastad ? {
|
||
vastOptions: {
|
||
allowVPAID: true,
|
||
adText: 'Advertising helps us keep the lights on', // Default null,
|
||
adTextPosition: 'top left', // Default 'top left
|
||
adCTAText: 'Subscribe now!', // Default "Visit now!",
|
||
adCTATextPosition: 'top right', //Default 'bottom right’,
|
||
adCTATextVast: true, // Enabled. To use the CTA text as provided in the VAST XML.
|
||
adList: [
|
||
{
|
||
roll: 'preRoll',
|
||
vastTag: '/static/vast_linear.xml',
|
||
},
|
||
{
|
||
roll: 'midRoll',
|
||
vastTag: '/static/vast_nonlinear.xml',
|
||
timer: 0
|
||
},
|
||
{
|
||
roll: 'midRoll',
|
||
vastTag: '/static/vpaid_linear.xml',
|
||
timer: 10
|
||
},
|
||
{
|
||
roll: 'midRoll',
|
||
vastTag: '/static/vpaid_nonlinear.xml',
|
||
timer: 15
|
||
}
|
||
]
|
||
},
|
||
} : {})
|
||
});
|
||
|
||
console.log('%cTEST INSTANCE', 'color: #fff; font-weight: bold; background-color: #BADA55; padding: 3px 6px; border-radius: 3px;', instance);
|
||
|
||
instance.on('miniPlayerToggle', (event) => console.log(`[Event API] miniPlayerToggle`, event, event.detail.isToggledOn));
|
||
|
||
Array.from(document.getElementById('setupForm').children).forEach(child => child.remove());
|
||
const refreshPage = document.createElement('button');
|
||
refreshPage.onclick = () => location.reload();
|
||
refreshPage.innerText = 'Reset Test';
|
||
refreshPage.style.marginBottom = '5px';
|
||
document.getElementById('setupForm').appendChild(refreshPage);
|
||
|
||
const toggleMiniPlayer = document.createElement('button');
|
||
toggleMiniPlayer.onclick = () => instance.toggleMiniPlayer();
|
||
toggleMiniPlayer.innerText = 'Toggle MiniPlayer (Controls API)';
|
||
toggleMiniPlayer.style.marginBottom = '5px';
|
||
document.getElementById('setupForm').appendChild(toggleMiniPlayer);
|
||
|
||
const toggleMiniPlayerOn = document.createElement('button');
|
||
toggleMiniPlayerOn.onclick = () => instance.toggleMiniPlayer(true);
|
||
toggleMiniPlayerOn.innerText = 'Toggle MiniPlayer ON (Controls API)';
|
||
toggleMiniPlayerOn.style.marginBottom = '5px';
|
||
document.getElementById('setupForm').appendChild(toggleMiniPlayerOn);
|
||
|
||
const toggleMiniPlayerOff = document.createElement('button');
|
||
toggleMiniPlayerOff.onclick = () => instance.toggleMiniPlayer(false);
|
||
toggleMiniPlayerOff.innerText = 'Toggle MiniPlayer OFF (Controls API)';
|
||
toggleMiniPlayerOff.style.marginBottom = '5px';
|
||
document.getElementById('setupForm').appendChild(toggleMiniPlayerOff);
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|