* Render a video element inside the wrapper.
(node: PicNodeData, ctx: RenderContext, wrapper: HTMLElement)
| 212 | * Render a video element inside the wrapper. |
| 213 | */ |
| 214 | function renderVideo(node: PicNodeData, ctx: RenderContext, wrapper: HTMLElement): void { |
| 215 | // Try to get video URL from mediaRId |
| 216 | const videoUrl = resolveMediaUrl(node.mediaRId, ctx) |
| 217 | |
| 218 | // Also try to show poster image from blipEmbed |
| 219 | let posterUrl: string | undefined |
| 220 | if (node.blipEmbed) { |
| 221 | const rel = ctx.slide.rels.get(node.blipEmbed) |
| 222 | if (rel) { |
| 223 | const mediaPath = resolveMediaPath(rel.target) |
| 224 | const data = ctx.presentation.media.get(mediaPath) |
| 225 | if (data && !isUnsupportedFormat(mediaPath)) { |
| 226 | posterUrl = getOrCreateBlobUrl(mediaPath, data, ctx.mediaUrlCache) |
| 227 | } |
| 228 | } |
| 229 | } |
| 230 | |
| 231 | if (videoUrl) { |
| 232 | const video = document.createElement('video') |
| 233 | video.src = videoUrl |
| 234 | video.controls = true |
| 235 | video.style.width = '100%' |
| 236 | video.style.height = '100%' |
| 237 | video.style.objectFit = 'contain' |
| 238 | video.style.backgroundColor = '#000' |
| 239 | if (posterUrl) { |
| 240 | video.poster = posterUrl |
| 241 | } |
| 242 | wrapper.appendChild(video) |
| 243 | } else if (posterUrl) { |
| 244 | // No video data available — show poster with play overlay |
| 245 | const img = document.createElement('img') |
| 246 | img.src = posterUrl |
| 247 | img.style.width = '100%' |
| 248 | img.style.height = '100%' |
| 249 | img.style.objectFit = 'fill' |
| 250 | wrapper.appendChild(img) |
| 251 | |
| 252 | const overlay = document.createElement('div') |
| 253 | overlay.style.position = 'absolute' |
| 254 | overlay.style.inset = '0' |
| 255 | overlay.style.display = 'flex' |
| 256 | overlay.style.alignItems = 'center' |
| 257 | overlay.style.justifyContent = 'center' |
| 258 | overlay.style.backgroundColor = 'rgba(0,0,0,0.3)' |
| 259 | overlay.style.color = '#fff' |
| 260 | overlay.style.fontSize = '24px' |
| 261 | overlay.textContent = '\u25B6' // play symbol |
| 262 | wrapper.appendChild(overlay) |
| 263 | } else { |
| 264 | renderPlaceholder(wrapper, 'Video') |
| 265 | } |
| 266 | } |
| 267 | |
| 268 | /** |
| 269 | * Render an audio element inside the wrapper. |
no test coverage detected