1// __________________ 2// getHTMLMediaElement.js 3 4function getHTMLMediaElement(mediaElement, config) { 5 config = config || {}; 6 7 if (!mediaElement.nodeName || (mediaElement.nodeName.toLowerCase() != 'audio' && mediaElement.nodeName.toLowerCase() != 'video')) { 8 if (!mediaElement.getVideoTracks().length) { 9 return getAudioElement(mediaElement, config); 10 } 11 12 var mediaStream = mediaElement; 13 mediaElement = document.createElement(mediaStream.getVideoTracks().length ? 'video' : 'audio'); 14 15 if ('srcObject' in mediaElement) { 16 mediaElement.srcObject = mediaStream; 17 } else { 18 mediaElement[!!navigator.mozGetUserMedia ? 'mozSrcObject' : 'src'] = !!navigator.mozGetUserMedia ? mediaStream : window.webkitURL.createObjectURL(mediaStream); 19 } 20 } 21 22 if (mediaElement.nodeName && mediaElement.nodeName.toLowerCase() == 'audio') { 23 return getAudioElement(mediaElement, config); 24 } 25 26 mediaElement.controls = false; 27 28 var buttons = config.buttons || ['mute-audio', 'mute-video', 'full-screen', 'volume-slider', 'stop']; 29 buttons.has = function(element) { 30 return buttons.indexOf(element) !== -1; 31 }; 32 33 config.toggle = config.toggle || []; 34 config.toggle.has = function(element) { 35 return config.toggle.indexOf(element) !== -1; 36 }; 37 38 var mediaElementContainer = document.createElement('div'); 39 mediaElementContainer.className = 'media-container'; 40 41 var mediaControls = document.createElement('div'); 42 mediaControls.className = 'media-controls'; 43 mediaElementContainer.appendChild(mediaControls); 44 45 if (buttons.has('mute-audio')) { 46 var muteAudio = document.createElement('div'); 47 muteAudio.className = 'control ' + (config.toggle.has('mute-audio') ? 'unmute-audio selected' : 'mute-audio'); 48 mediaControls.appendChild(muteAudio); 49 50 muteAudio.onclick = function() { 51 if (muteAudio.className.indexOf('unmute-audio') != -1) { 52 muteAudio.className = muteAudio.className.replace('unmute-audio selected', 'mute-audio'); 53 mediaElement.muted = false; 54 mediaElement.volume = 1; 55 if (config.onUnMuted) config.onUnMuted('audio'); 56 } else { 57 muteAudio.className = muteAudio.className.replace('mute-audio', 'unmute-audio selected'); 58 mediaElement.muted = true; 59 mediaElement.volume = 0; 60 if (config.onMuted) config.onMuted('audio'); 61 } 62 }; 63 } 64 65 if (buttons.has('mute-video')) { 66 var muteVideo = document.createElement('div'); 67 muteVideo.className = 'control ' + (config.toggle.has('mute-video') ? 'unmute-video selected' : 'mute-video'); 68 mediaControls.appendChild(muteVideo); 69 70 muteVideo.onclick = function() { 71 if (muteVideo.className.indexOf('unmute-video') != -1) { 72 muteVideo.className = muteVideo.className.replace('unmute-video selected', 'mute-video'); 73 mediaElement.muted = false; 74 mediaElement.volume = 1; 75 mediaElement.play(); 76 if (config.onUnMuted) config.onUnMuted('video'); 77 } else { 78 muteVideo.className = muteVideo.className.replace('mute-video', 'unmute-video selected'); 79 mediaElement.muted = true; 80 mediaElement.volume = 0; 81 mediaElement.pause(); 82 if (config.onMuted) config.onMuted('video'); 83 } 84 }; 85 } 86 87 if (buttons.has('take-snapshot')) { 88 var takeSnapshot = document.createElement('div'); 89 takeSnapshot.className = 'control take-snapshot'; 90 mediaControls.appendChild(takeSnapshot); 91 92 takeSnapshot.onclick = function() { 93 if (config.onTakeSnapshot) config.onTakeSnapshot(); 94 }; 95 } 96 97 if (buttons.has('stop')) { 98 var stop = document.createElement('div'); 99 stop.className = 'control stop'; 100 mediaControls.appendChild(stop); 101 102 stop.onclick = function() { 103 mediaElementContainer.style.opacity = 0; 104 setTimeout(function() { 105 if (mediaElementContainer.parentNode) { 106 mediaElementContainer.parentNode.removeChild(mediaElementContainer); 107 } 108 }, 800); 109 if (config.onStopped) config.onStopped(); 110 }; 111 } 112 113 var volumeControl = document.createElement('div'); 114 volumeControl.className = 'volume-control'; 115 116 if (buttons.has('record-audio')) { 117 var recordAudio = document.createElement('div'); 118 recordAudio.className = 'control ' + (config.toggle.has('record-audio') ? 'stop-recording-audio selected' : 'record-audio'); 119 volumeControl.appendChild(recordAudio); 120 121 recordAudio.onclick = function() { 122 if (recordAudio.className.indexOf('stop-recording-audio') != -1) { 123 recordAudio.className = recordAudio.className.replace('stop-recording-audio selected', 'record-audio'); 124 if (config.onRecordingStopped) config.onRecordingStopped('audio'); 125 } else { 126 recordAudio.className = recordAudio.className.replace('record-audio', 'stop-recording-audio selected'); 127 if (config.onRecordingStarted) config.onRecordingStarted('audio'); 128 } 129 }; 130 } 131 132 if (buttons.has('record-video')) { 133 var recordVideo = document.createElement('div'); 134 recordVideo.className = 'control ' + (config.toggle.has('record-video') ? 'stop-recording-video selected' : 'record-video'); 135 volumeControl.appendChild(recordVideo); 136 137 recordVideo.onclick = function() { 138 if (recordVideo.className.indexOf('stop-recording-video') != -1) { 139 recordVideo.className = recordVideo.className.replace('stop-recording-video selected', 'record-video'); 140 if (config.onRecordingStopped) config.onRecordingStopped('video'); 141 } else { 142 recordVideo.className = recordVideo.className.replace('record-video', 'stop-recording-video selected'); 143 if (config.onRecordingStarted) config.onRecordingStarted('video'); 144 } 145 }; 146 } 147 148 if (buttons.has('volume-slider')) { 149 var volumeSlider = document.createElement('div'); 150 volumeSlider.className = 'control volume-slider'; 151 volumeControl.appendChild(volumeSlider); 152 153 var slider = document.createElement('input'); 154 slider.type = 'range'; 155 slider.min = 0; 156 slider.max = 100; 157 slider.value = 100; 158 slider.onchange = function() { 159 mediaElement.volume = '.' + slider.value.toString().substr(0, 1); 160 }; 161 volumeSlider.appendChild(slider); 162 } 163 164 if (buttons.has('full-screen')) { 165 var zoom = document.createElement('div'); 166 zoom.className = 'control ' + (config.toggle.has('zoom-in') ? 'zoom-out selected' : 'zoom-in'); 167 168 if (!slider && !recordAudio && !recordVideo && zoom) {
169 mediaControls.insertBefore(zoom, mediaControls.firstChild); 170 } else volumeControl.appendChild(zoom); 171 172 zoom.onclick = function() { 173 if (zoom.className.indexOf('zoom-out') != -1) { 174 zoom.className = zoom.className.replace('zoom-out selected', 'zoom-in'); 175 exitFullScreen(); 176 } else { 177 zoom.className = zoom.className.replace('zoom-in', 'zoom-out selected'); 178 launchFullscreen(mediaElementContainer); 179 } 180 }; 181 182 function launchFullscreen(element) { 183 if (element.requestFullscreen) { 184 element.requestFullscreen(); 185 } else if (element.mozRequestFullScreen) { 186 element.mozRequestFullScreen(); 187 } else if (element.webkitRequestFullscreen) { 188 element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 189 } 190 } 191 192 function exitFullScreen() { 193 if (document.fullscreen) { 194 document.cancelFullScreen(); 195 } 196 197 if (document.mozFullScreen) { 198 document.mozCancelFullScreen(); 199 } 200 201 if (document.webkitIsFullScreen) { 202 document.webkitCancelFullScreen(); 203 } 204 } 205 206 function screenStateChange(e) { 207 if (e.srcElement != mediaElementContainer) return; 208 209 var isFullScreeMode = document.webkitIsFullScreen || document.mozFullScreen || document.fullscreen; 210 211 mediaElementContainer.style.width = (isFullScreeMode ? (window.innerWidth - 20) : config.width) + 'px'; 212 mediaElementContainer.style.display = isFullScreeMode ? 'block' : 'inline-block'; 213 214 if (config.height) { 215 mediaBox.style.height = (isFullScreeMode ? (window.innerHeight - 20) : config.height) + 'px'; 216 } 217 218 if (!isFullScreeMode && config.onZoomout) config.onZoomout(); 219 if (isFullScreeMode && config.onZoomin) config.onZoomin(); 220 221 if (!isFullScreeMode && zoom.className.indexOf('zoom-out') != -1) { 222 zoom.className = zoom.className.replace('zoom-out selected', 'zoom-in'); 223 if (config.onZoomout) config.onZoomout(); 224 } 225 setTimeout(adjustControls, 1000); 226 } 227 228 document.addEventListener('fullscreenchange', screenStateChange, false); 229 document.addEventListener('mozfullscreenchange', screenStateChange, false); 230 document.addEventListener('webkitfullscreenchange', screenStateChange, false); 231 } 232 233 if (buttons.has('volume-slider') || buttons.has('full-screen') || buttons.has('record-audio') || buttons.has('record-video')) { 234 mediaElementContainer.appendChild(volumeControl); 235 } 236 237 var mediaBox = document.createElement('div'); 238 mediaBox.className = 'media-box'; 239 mediaElementContainer.appendChild(mediaBox); 240 241 if (config.title) { 242 var h2 = document.createElement('h2'); 243 h2.innerHTML = config.title; 244 h2.setAttribute('style', 'position: absolute;color:white;font-size:17px;text-shadow: 1px 1px black;padding:0;margin:0;text-align: left; margin-top: 10px; margin-left: 10px; display: block; border: 0;line-height:1.5;z-index:1;'); 245 mediaBox.appendChild(h2); 246 } 247 248 mediaBox.appendChild(mediaElement); 249 250 if (!config.width) config.width = (innerWidth / 2) - 50; 251 252 mediaElementContainer.style.width = config.width + 'px'; 253 254 if (config.height) { 255 mediaBox.style.height = config.height + 'px'; 256 } 257 258 mediaBox.querySelector('video').style.maxHeight = innerHeight + 'px'; 259 260 var times = 0; 261 262 function adjustControls() { 263 mediaControls.style.marginLeft = (mediaElementContainer.clientWidth - mediaControls.clientWidth - 2) + 'px'; 264 265 if (slider) { 266 slider.style.width = (mediaElementContainer.clientWidth / 3) + 'px'; 267 volumeControl.style.marginLeft = (mediaElementContainer.clientWidth / 3 - 30) + 'px'; 268 269 if (zoom) zoom.style['border-top-right-radius'] = '5px'; 270 } else { 271 volumeControl.style.marginLeft = (mediaElementContainer.clientWidth - volumeControl.clientWidth - 2) + 'px'; 272 } 273 274 volumeControl.style.marginTop = (mediaElementContainer.clientHeight - volumeControl.clientHeight - 2) + 'px'; 275 276 if (times < 10) { 277 times++; 278 setTimeout(adjustControls, 1000); 279 } else times = 0; 280 } 281 282 if (config.showOnMouseEnter || typeof config.showOnMouseEnter === 'undefined') { 283 mediaElementContainer.onmouseenter = mediaElementContainer.onmousedown = function() { 284 adjustControls();
285 mediaControls.style.opacity = 1; 286 volumeControl.style.opacity = 1; 287 }; 288 289 mediaElementContainer.onmouseleave = function() { 290 mediaControls.style.opacity = 0; 291 volumeControl.style.opacity = 0; 292 }; 293 } else { 294 setTimeout(function() { 295 adjustControls(); 296 setTimeout(function() { 297 mediaControls.style.opacity = 1; 298 volumeControl.style.opacity = 1; 299 }, 300); 300 }, 700); 301 } 302 303 adjustControls(); 304 305 mediaElementContainer.toggle = function(clasName) { 306 if (typeof clasName != 'string') { 307 for (var i = 0; i < clasName.length; i++) { 308 mediaElementContainer.toggle(clasName[i]); 309 } 310 return; 311 } 312 313 if (clasName == 'mute-audio' && muteAudio) muteAudio.onclick(); 314 if (clasName == 'mute-video' && muteVideo) muteVideo.onclick(); 315 316 if (clasName == 'record-audio' && recordAudio) recordAudio.onclick(); 317 if (clasName == 'record-video' && recordVideo) recordVideo.onclick(); 318 319 if (clasName == 'stop' && stop) stop.onclick(); 320 321 return this; 322 }; 323 324 mediaElementContainer.media = mediaElement; 325 326 return mediaElementContainer; 327} 328 329// __________________ 330// getAudioElement.js 331 332function getAudioElement(mediaElement, config) { 333 config = config || {}; 334 335 if (!mediaElement.nodeName || (mediaElement.nodeName.toLowerCase() != 'audio' && mediaElement.nodeName.toLowerCase() != 'video')) { 336 var mediaStream = mediaElement; 337 mediaElement = document.createElement('audio'); 338 339 if ('srcObject' in mediaElement) { 340 mediaElement.mediaElement = mediaStream; 341 } else { 342 mediaElement[!!navigator.mozGetUserMedia ? 'mozSrcObject' : 'src'] = !!navigator.mozGetUserMedia ? mediaStream : window.webkitURL.createObjectURL(mediaStream); 343 } 344 } 345 346 config.toggle = config.toggle || []; 347 config.toggle.has = function(element) { 348 return config.toggle.indexOf(element) !== -1; 349 }; 350 351 mediaElement.controls = false; 352 mediaElement.play(); 353 354 var mediaElementContainer = document.createElement('div'); 355 mediaElementContainer.className = 'media-container'; 356 357 var mediaControls = document.createElement('div'); 358 mediaControls.className = 'media-controls'; 359 mediaElementContainer.appendChild(mediaControls); 360 361 var muteAudio = document.createElement('div'); 362 muteAudio.className = 'control ' + (config.toggle.has('mute-audio') ? 'unmute-audio selected' : 'mute-audio'); 363 mediaControls.appendChild(muteAudio); 364 365 muteAudio.style['border-top-left-radius'] = '5px'; 366 367 muteAudio.onclick = function() { 368 if (muteAudio.className.indexOf('unmute-audio') != -1) { 369 muteAudio.className = muteAudio.className.replace('unmute-audio selected', 'mute-audio'); 370 mediaElement.muted = false; 371 if (config.onUnMuted) config.onUnMuted('audio'); 372 } else { 373 muteAudio.className = muteAudio.className.replace('mute-audio', 'unmute-audio selected'); 374 mediaElement.muted = true; 375 if (config.onMuted) config.onMuted('audio'); 376 } 377 }; 378 379 if (!config.buttons || (config.buttons && config.buttons.indexOf('record-audio') != -1)) { 380 var recordAudio = document.createElement('div'); 381 recordAudio.className = 'control ' + (config.toggle.has('record-audio') ? 'stop-recording-audio selected' : 'record-audio'); 382 mediaControls.appendChild(recordAudio); 383 384 recordAudio.onclick = function() { 385 if (recordAudio.className.indexOf('stop-recording-audio') != -1) { 386 recordAudio.className = recordAudio.className.replace('stop-recording-audio selected', 'record-audio'); 387 if (config.onRecordingStopped) config.onRecordingStopped('audio'); 388 } else { 389 recordAudio.className = recordAudio.className.replace('record-audio', 'stop-recording-audio selected'); 390 if (config.onRecordingStarted) config.onRecordingStarted('audio'); 391 } 392 }; 393 } 394 395 var volumeSlider = document.createElement('div'); 396 volumeSlider.className = 'control volume-slider'; 397 volumeSlider.style.width = 'auto';
398 mediaControls.appendChild(volumeSlider); 399 400 var slider = document.createElement('input'); 401 slider.style.marginTop = '11px'; 402 slider.style.width = ' 200px'; 403 404 if (config.buttons && config.buttons.indexOf('record-audio') == -1) { 405 slider.style.width = ' 241px'; 406 } 407 408 slider.type = 'range'; 409 slider.min = 0; 410 slider.max = 100; 411 slider.value = 100; 412 slider.onchange = function() { 413 mediaElement.volume = '.' + slider.value.toString().substr(0, 1); 414 }; 415 volumeSlider.appendChild(slider); 416 417 var stop = document.createElement('div'); 418 stop.className = 'control stop'; 419 mediaControls.appendChild(stop); 420 421 stop.onclick = function() { 422 mediaElementContainer.style.opacity = 0; 423 setTimeout(function() { 424 if (mediaElementContainer.parentNode) { 425 mediaElementContainer.parentNode.removeChild(mediaElementContainer); 426 } 427 }, 800); 428 if (config.onStopped) config.onStopped(); 429 }; 430 431 stop.style['border-top-right-radius'] = '5px'; 432 stop.style['border-bottom-right-radius'] = '5px'; 433 434 var mediaBox = document.createElement('div'); 435 mediaBox.className = 'media-box'; 436 mediaElementContainer.appendChild(mediaBox); 437 438 var h2 = document.createElement('h2'); 439 h2.innerHTML = config.title || 'Audio Element'; 440 h2.setAttribute('style', 'position: absolute;color: rgb(160, 160, 160);font-size: 20px;text-shadow: 1px 1px rgb(255, 255, 255);padding:0;margin:0;'); 441 mediaBox.appendChild(h2); 442 443 mediaBox.appendChild(mediaElement); 444 445 mediaElementContainer.style.width = '329px'; 446 mediaBox.style.height = '90px'; 447 448 h2.style.width = mediaElementContainer.style.width; 449 h2.style.height = '50px'; 450 h2.style.overflow = 'hidden'; 451 452 var times = 0; 453 454 function adjustControls() { 455 mediaControls.style.marginLeft = (mediaElementContainer.clientWidth - mediaControls.clientWidth - 7) + 'px'; 456 mediaControls.style.marginTop = (mediaElementContainer.clientHeight - mediaControls.clientHeight - 6) + 'px'; 457 if (times < 10) { 458 times++; 459 setTimeout(adjustControls, 1000); 460 } else times = 0; 461 } 462 463 if (config.showOnMouseEnter || typeof config.showOnMouseEnter === 'undefined') { 464 mediaElementContainer.onmouseenter = mediaElementContainer.onmousedown = function() { 465 adjustControls(); 466 mediaControls.style.opacity = 1; 467 }; 468 469 mediaElementContainer.onmouseleave = function() { 470 mediaControls.style.opacity = 0; 471 }; 472 } else { 473 setTimeout(function() { 474 adjustControls(); 475 setTimeout(function() { 476 mediaControls.style.opacity = 1; 477 }, 300); 478 }, 700); 479 } 480 481 adjustControls(); 482 483 mediaElementContainer.toggle = function(clasName) { 484 if (typeof clasName != 'string') { 485 for (var i = 0; i < clasName.length; i++) { 486 mediaElementContainer.toggle(clasName[i]); 487 } 488 return; 489 } 490 491 if (clasName == 'mute-audio' && muteAudio) muteAudio.onclick(); 492 if (clasName == 'record-audio' && recordAudio) recordAudio.onclick(); 493 if (clasName == 'stop' && stop) stop.onclick(); 494 495 return this; 496 }; 497 498 mediaElementContainer.media = mediaElement; 499 500 return mediaElementContainer; 501}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.