83 lines
		
	
	
		
			2.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			83 lines
		
	
	
		
			2.4 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>Player Reinitialization</title>
 | 
						|
    <%= htmlWebpackPlugin.tags.headTags %>
 | 
						|
    <style lang="css">
 | 
						|
        #fluid-player-e2e-case {
 | 
						|
            width: 90%;
 | 
						|
        }
 | 
						|
    </style>
 | 
						|
</head>
 | 
						|
<body>
 | 
						|
 | 
						|
<div id="target"></div>
 | 
						|
 | 
						|
<br/>
 | 
						|
 | 
						|
<button id="destroy" role="button">Destroy</button>
 | 
						|
<button id="newInstance" role="button">Create New Instance</button>
 | 
						|
<button id="cd" role="button">Create and Destroy</button>
 | 
						|
 | 
						|
<hr/>
 | 
						|
 | 
						|
<p>This test is meant to check if the Fluid Player instance is properly clean up after destroying it</p>
 | 
						|
 | 
						|
<%= htmlWebpackPlugin.tags.bodyTags %>
 | 
						|
 | 
						|
<script>
 | 
						|
    let instance;
 | 
						|
    const targetElm = document.getElementById('target')
 | 
						|
    const destroyBtn = document.getElementById('destroy');
 | 
						|
    const newInstanceBtn = document.getElementById('newInstance');
 | 
						|
    const cdButton = document.getElementById('cd');
 | 
						|
 | 
						|
    function destroy() {
 | 
						|
        instance.destroy();
 | 
						|
        instance = undefined;
 | 
						|
    }
 | 
						|
 | 
						|
    function create() {
 | 
						|
        if (instance) {
 | 
						|
            return;
 | 
						|
        }
 | 
						|
 | 
						|
        targetElm.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>
 | 
						|
        `;
 | 
						|
        instance = fluidPlayer('fluid-player-e2e-case', {
 | 
						|
            layoutControls: {
 | 
						|
                allowDownload: true
 | 
						|
            },
 | 
						|
            vastOptions: {
 | 
						|
                adList: [
 | 
						|
                    {
 | 
						|
                        vastTag: '/static/vast_nonlinear.xml',
 | 
						|
                        roll: 'preRoll',
 | 
						|
                    },
 | 
						|
                    {
 | 
						|
                        vastTag: '/static/vast_nonlinear.xml',
 | 
						|
                        roll: 'midRoll',
 | 
						|
                        timer: 10,
 | 
						|
                    }
 | 
						|
                ],
 | 
						|
            },
 | 
						|
        });
 | 
						|
    }
 | 
						|
 | 
						|
    destroyBtn.onclick = destroy;
 | 
						|
    newInstanceBtn.onclick = create;
 | 
						|
    cdButton.onclick = () => { create(); destroy(); }
 | 
						|
</script>
 | 
						|
 | 
						|
</body>
 | 
						|
</html>
 |