-
Notifications
You must be signed in to change notification settings - Fork 121
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[media] Workaround to support video poster (#1037)
This CL allows the web app to set a poster image for video element by: 1. Playing the video in decode-to-texture mode. 2. Setting the poster image as the background image of the video element. Previously the video background is painted to black when there are no frames to display. This isn't the expected behavior as it overwrites any background image or color settings on the video element. Now by default Cobalt won't paint the video background to black. H5vcc setting `MediaElement.PaintingVideoBackgroundToBlack` is also introduced so the web app can opt for the previous behavior, i.e. set the background to black. b/261922568 (cherry picked from commit a816c49)
- Loading branch information
1 parent
51686c9
commit 55d65b0
Showing
13 changed files
with
260 additions
and
17 deletions.
There are no files selected for viewing
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 77 additions & 0 deletions
77
cobalt/demos/content/video-background-demo/video-background-demo.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <!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>Video Elements With Background</title> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| video { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| #ui-layer { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| position: absolute; | ||
| top: 15%; | ||
| height: 85%; | ||
| width: 100%; | ||
| background-color: rgba(33, 33, 33, .75); | ||
| padding: 24px; | ||
| margin: auto; | ||
| } | ||
|
|
||
| .item { | ||
| width: 320px; | ||
| height: 240px; | ||
| display: inline-block; | ||
| margin: 24px; | ||
| vertical-align: middle; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="ui-layer"> | ||
| <div class="item"> | ||
| <video id="video1" muted="1" style="background-color: #4285F4"> | ||
| </video> | ||
| </div> | ||
| <div class="item"> | ||
| <video id="video2" muted="1" | ||
| style="background-image: url(sddefault.jpg); | ||
| background-size: 320px 240px;"> | ||
| </video> | ||
| </div> | ||
| <div class="item"> | ||
| <video id="video3" muted="1" style="background-color: #4285F4"> | ||
| </video> | ||
| </div> | ||
| <div class="item"> | ||
| <video id="video4" muted="1" | ||
| style="background-image: url(sddefault.jpg); | ||
| background-size: 320px 240px;"> | ||
| </video> | ||
| </div> | ||
| </div> | ||
| <script src="video-background-demo.js"></script> | ||
| </body> | ||
| </html> |
106 changes: 106 additions & 0 deletions
106
cobalt/demos/content/video-background-demo/video-background-demo.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| // 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. | ||
|
|
||
| var nextVideoElementIndex = 0; | ||
| var audioData; | ||
| var videoData; | ||
|
|
||
| function downloadMediaData(downloadedCallback) { | ||
| var xhr = new XMLHttpRequest; | ||
|
|
||
| xhr.onload = function() { | ||
| audioData = xhr.response; | ||
| console.log("Downloaded " + audioData.byteLength + " of audio data."); | ||
|
|
||
| xhr.onload = function() { | ||
| videoData = xhr.response; | ||
| console.log("Downloaded " + videoData.byteLength + " of video data."); | ||
| downloadedCallback(); | ||
| } | ||
|
|
||
| xhr.open("GET", "vp9-720p.webm", true); | ||
| xhr.send(); | ||
| } | ||
|
|
||
| xhr.open("GET", "dash-audio.mp4", true); | ||
| xhr.responseType = "arraybuffer"; | ||
| xhr.send(); | ||
| } | ||
|
|
||
| function playVideoOn(videoElement) { | ||
| var ms = new MediaSource; | ||
| ms.addEventListener('sourceopen', function() { | ||
| console.log("Creating SourceBuffer objects."); | ||
| var audioBuffer = ms.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"'); | ||
| var videoBuffer = ms.addSourceBuffer('video/webm; codecs="vp9"; decode-to-texture=true'); | ||
| audioBuffer.addEventListener("updateend", function() { | ||
| audioBuffer.abort(); | ||
| videoBuffer.addEventListener("updateend", function() { | ||
| setTimeout(function() { | ||
| videoBuffer.addEventListener("updateend", function() { | ||
| videoBuffer.abort(); | ||
| ms.endOfStream(); | ||
| videoElement.ontimeupdate = function() { | ||
| if (videoElement.currentTime > 10) { | ||
| console.log("Stop playback."); | ||
| videoElement.src = ''; | ||
| videoElement.load(); | ||
| videoElement.ontimeupdate = null; | ||
| } | ||
| } | ||
| console.log("Start playback."); | ||
| videoElement.play(); | ||
| }); | ||
| videoBuffer.appendBuffer(videoData.slice(1024)); | ||
| }, 5000); | ||
| }); | ||
| videoBuffer.appendBuffer(videoData.slice(0, 1024)); | ||
| }); | ||
| audioBuffer.appendBuffer(audioData); | ||
| }); | ||
|
|
||
| console.log("Attaching MediaSource to video element."); | ||
| videoElement.src = URL.createObjectURL(ms); | ||
| } | ||
|
|
||
| function setupKeyHandler() { | ||
| document.onkeydown = function() { | ||
| videoElements = document.getElementsByTagName('video'); | ||
| for(let i = 0; i < videoElements.length; i++) { | ||
| if (videoElements[i].playing) { | ||
| console.log("Ignore key press as a video is still playing."); | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| nextVideoElementIndex = nextVideoElementIndex % videoElements.length; | ||
|
|
||
| console.log("Trying to play next video at index " + nextVideoElementIndex); | ||
|
|
||
| var currentVideoElement = videoElements[nextVideoElementIndex]; | ||
| if (currentVideoElement.setMaxVideoCapabilities) { | ||
| if (nextVideoElementIndex < videoElements.length / 2) { | ||
| currentVideoElement.setMaxVideoCapabilities(""); | ||
| } else { | ||
| currentVideoElement.setMaxVideoCapabilities("width=1920; height=1080"); | ||
| } | ||
| } | ||
|
|
||
| nextVideoElementIndex++; | ||
|
|
||
| playVideoOn(currentVideoElement); | ||
| }; | ||
| } | ||
|
|
||
| downloadMediaData(setupKeyHandler); |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.