| <!DOCTYPE html> |
| <!-- |
| | Copyright 2023 The Cobalt Authors. All Rights Reserved. |
| | |
| | Licensed under the Apache License, Version 2.0 (the "License"); |
| | you may not use this file except in compliance with the License. |
| | You may obtain a copy of the License at |
| | |
| | http://www.apache.org/licenses/LICENSE-2.0 |
| | |
| | Unless required by applicable law or agreed to in writing, software |
| | distributed under the License is distributed on an "AS IS" BASIS, |
| | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| | See the License for the specific language governing permissions and |
| | limitations under the License. |
| --> |
| |
| <html> |
| <head> |
| <title>Multi Encrypted Video</title> |
| <style> |
| body { |
| margin: 0; |
| } |
| |
| #player-layer { |
| width: 100%; |
| height: 100%; |
| } |
| |
| video { |
| width: 100%; |
| height: 100%; |
| } |
| |
| #ui-layer { |
| position: absolute; |
| top: 15%; |
| height: 85%; |
| width: 100%; |
| background-color: rgba(33, 33, 33, .75); |
| padding: 24px; |
| } |
| |
| .item { |
| width: 426px; |
| height: 240px; |
| display: inline-block; |
| margin: 24px; |
| vertical-align: middle; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="player-layer"> |
| <video class="primary" id="primary-video" muted="1" autoplay="1"></video> |
| </div> |
| <div id="ui-layer"> |
| <div class="item" style="background-color: #D44"> |
| <video class="secondary" id="secondary-video-1" muted="1" autoplay="1"></video> |
| </div> |
| <div class="item" style="background-color: #4D4"> |
| <video class="secondary" id="secondary-video-2" muted="1" autoplay="1"></video> |
| </div> |
| <div class="item" style="background-color: #44D"> |
| <video class="secondary" id="secondary-video-3" muted="1" autoplay="1"></video> |
| </div> |
| </div> |
| <script src="multi-encrypted-video.js"></script> |
| </body> |
| </html> |
