|
| 1 | +<html> |
| 2 | +<head> |
| 3 | +<!-- for non-UI builds: --> |
| 4 | +<script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/shaka-player.compiled.js"></script> |
| 5 | +<!-- or, for UI builds: --> |
| 6 | +<script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/shaka-player.ui.js"></script> |
| 7 | +<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/3.2.0/controls.css"> |
| 8 | + <style> |
| 9 | + body { |
| 10 | + width:100%; |
| 11 | + height: 100%; |
| 12 | + font-family: Poppins; |
| 13 | + display:block; |
| 14 | + position: absolute; |
| 15 | + padding: 0px; |
| 16 | + margin: 0px; |
| 17 | + background: #000; |
| 18 | + } |
| 19 | + video{ |
| 20 | + width:100%; |
| 21 | + height: 100%; |
| 22 | + display:inline-block; |
| 23 | + -webkit-user-select:none; |
| 24 | + -moz-user-select:none; |
| 25 | + -ms-user-select:none; |
| 26 | + user-select:none; |
| 27 | + } |
| 28 | + a, a:hover, a:focus, a:active { |
| 29 | + text-decoration: none; |
| 30 | + } |
| 31 | + |
| 32 | +</style> |
| 33 | + <style> |
| 34 | + div a img{visibility:hidden;} |
| 35 | +body::before { |
| 36 | + position: absolute; |
| 37 | + top: 5px; |
| 38 | + right: 5px; |
| 39 | + z-index: 10; |
| 40 | + content: ''; |
| 41 | + height: 70px; |
| 42 | + width: 110px; |
| 43 | + background: url(' ') no-repeat; |
| 44 | + background-size: 110px auto, auto; |
| 45 | + opacity: 0.4; |
| 46 | + } |
| 47 | +</style> |
| 48 | +</head> |
| 49 | +<body> |
| 50 | +<center> <div data-shaka-player-container style="max-width:40em" |
| 51 | + data-shaka-player-cast-receiver-id="1BA79154"> |
| 52 | + <!-- The data-shaka-player tag will make the UI library use this video element. |
| 53 | + If no video is provided, the UI will automatically make one inside the container div. --> |
| 54 | + |
| 55 | + <video autoplay data-shaka-player id="video" poster="" style="width:100%;height:100%"></video> |
| 56 | + </div> |
| 57 | + </div></center> |
| 58 | +<script> |
| 59 | + |
| 60 | +const manifestUri = |
| 61 | + 'https://anevi-live-channel-cdn.mncnow.id/live/eds/ANTV/sa_dash_vmx/ANTV.mpd?begin=1679138810&end=1679144300'; |
| 62 | + |
| 63 | +async function init() { |
| 64 | + // When using the UI, the player is made automatically by the UI object. |
| 65 | + const video = document.getElementById('video'); |
| 66 | + const ui = video['ui']; |
| 67 | + const controls = ui.getControls(); |
| 68 | + const player = controls.getPlayer(); |
| 69 | + |
| 70 | +player.configure({ |
| 71 | + drm: { |
| 72 | + clearKeys: { |
| 73 | + // 'key-id-in-hex': 'key-in-hex', |
| 74 | + '4310edb8b9ffe79abb40bacafa778ec3': 'aebb7e86d8a336d9a93d3dd8a41153cf', |
| 75 | + } |
| 76 | + } |
| 77 | +}); |
| 78 | + |
| 79 | + // Attach player and ui to the window to make it easy to access in the JS console. |
| 80 | + window.player = player; |
| 81 | + window.ui = ui; |
| 82 | + |
| 83 | + // Listen for error events. |
| 84 | + player.addEventListener('error', onPlayerErrorEvent); |
| 85 | + controls.addEventListener('error', onUIErrorEvent); |
| 86 | + |
| 87 | + // Try to load a manifest. |
| 88 | + // This is an asynchronous process. |
| 89 | + try { |
| 90 | + await player.load(manifestUri); |
| 91 | + // This runs if the asynchronous load is successful. |
| 92 | + console.log('The video has now been loaded!'); |
| 93 | + } catch (error) { |
| 94 | + onPlayerError(error); |
| 95 | + } |
| 96 | +} |
| 97 | + |
| 98 | +function onPlayerErrorEvent(errorEvent) { |
| 99 | + // Extract the shaka.util.Error object from the event. |
| 100 | + onPlayerError(event.detail); |
| 101 | +} |
| 102 | + |
| 103 | +function onPlayerError(error) { |
| 104 | + // Handle player error |
| 105 | + console.error('Error code', error.code, 'object', error); |
| 106 | +} |
| 107 | + |
| 108 | +function onUIErrorEvent(errorEvent) { |
| 109 | + // Extract the shaka.util.Error object from the event. |
| 110 | + onPlayerError(event.detail); |
| 111 | +} |
| 112 | + |
| 113 | +function initFailed(errorEvent) { |
| 114 | + // Handle the failure to load; errorEvent.detail.reasonCode has a |
| 115 | + // shaka.ui.FailReasonCode describing why. |
| 116 | + console.error('Unable to load the UI library!'); |
| 117 | +} |
| 118 | + |
| 119 | +// Listen to the custom shaka-ui-loaded event, to wait until the UI is loaded. |
| 120 | +document.addEventListener('shaka-ui-loaded', init); |
| 121 | +// Listen to the custom shaka-ui-load-failed event, in case Shaka Player fails |
| 122 | +// to load (e.g. due to lack of browser support). |
| 123 | +document.addEventListener('shaka-ui-load-failed', initFailed); |
| 124 | + </script> |
| 125 | +</body> |
| 126 | +</html> |
0 commit comments