| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 // | |
| 5 // Javascript that is needed for HTML files with the HTML5 media player. | |
| 6 // It does the following: | |
| 7 // * Parses query strings and sets the HTML tag. | |
| 8 // * Installs event handlers to change the HTML title. | |
| 9 | |
| 10 | |
| 11 function InstallEventHandler(event, action) { | |
| 12 var player = document.getElementById('player'); | |
| 13 player.addEventListener(event, function(e) { | |
| 14 eval(action); | |
| 15 }, false); | |
| 16 } | |
| 17 | |
| 18 var qs = new Array(); | |
| 19 | |
| 20 function defined(item) { | |
| 21 return typeof item != 'undefined'; | |
| 22 } | |
| 23 | |
| 24 function queryString(key) { | |
| 25 if (!defined(qs[key])) { | |
| 26 var reQS = new RegExp('[?&]' + key + '=([^&$]*)', 'i'); | |
| 27 var offset = location.search.search(reQS); | |
| 28 qs[key] = (offset >= 0)? RegExp.$1 : null; | |
| 29 } | |
| 30 return qs[key]; | |
| 31 } | |
| 32 | |
| 33 var media_url = queryString('media'); | |
| 34 var ok = true; | |
| 35 | |
| 36 if (!queryString('media')) { | |
| 37 document.title = 'FAIL'; | |
| 38 ok = false; | |
| 39 } | |
| 40 | |
| 41 if (defined(queryString('t'))) { | |
| 42 // Append another parameter "t=" in url that disables media cache. | |
| 43 media_url += '?t=' + (new Date()).getTime(); | |
| 44 } | |
| 45 | |
| 46 var tag = queryString('tag'); | |
| 47 | |
| 48 if (!queryString('tag')) { | |
| 49 // Default tag is video tag. | |
| 50 tag = 'video'; | |
| 51 } | |
| 52 | |
| 53 if (tag != 'audio' && tag != 'video') { | |
| 54 document.title = 'FAIL'; | |
| 55 ok = false; | |
| 56 } | |
| 57 | |
| 58 function translateCommand(command, arg) { | |
| 59 // Translate command in 'actions' query string into corresponding JavaScript | |
| 60 // code. | |
| 61 if (command == 'seek') { | |
| 62 return 'player.currentTime=' + arg + ';'; | |
| 63 } else if (command == 'ratechange') { | |
| 64 return 'player.playbackRate=' + arg + ';'; | |
| 65 } else if (command == 'play' || command == 'pause') { | |
| 66 return 'player.' + command + '();'; | |
| 67 } else { | |
| 68 return 'ERROR - ' + command + ' is not a valid command.' | |
| 69 } | |
| 70 } | |
| 71 | |
| 72 var container = document.getElementById('player_container'); | |
| 73 container.innerHTML = '<div id="main" width="0%" height="0%" ' + | |
| 74 'style="display: inline-block;"></div>' + | |
| 75 '<div id="extra"></div>'; | |
| 76 // Create new player. | |
| 77 var newElement = document.createElement(tag); | |
| 78 newElement.setAttribute('id', 'player'); | |
| 79 newElement.setAttribute('src', queryString('media')); | |
| 80 // Hide the video at the beginning for jerky test, in which | |
| 81 // we have to set predefined image before playing video. | |
| 82 if (queryString('jerky')) { | |
| 83 newElement.setAttribute('style', 'opacity: 0;'); | |
| 84 } | |
| 85 var main = document.getElementById('main'); | |
| 86 main.appendChild(newElement); | |
| 87 | |
| 88 // Install event handlers. | |
| 89 var player = document.getElementById('player'); | |
| 90 InstallEventHandler('error', | |
| 91 'document.title = "ERROR = " + player.error.code'); | |
| 92 InstallEventHandler('playing', 'document.title = "PLAYING"'); | |
| 93 InstallEventHandler('ended', 'document.title = "END"'); | |
| 94 | |
| 95 if (queryString('num_extra')) { | |
| 96 // Process query string for extra players. | |
| 97 // Exra players use the exact same media file as the main player. | |
| 98 for (var i = 0; i < queryString('num_extra'); i++) { | |
| 99 var extra = document.getElementById('extra'); | |
| 100 var extraElement = document.createElement(tag); | |
| 101 extraElement.setAttribute('id', 'player' + i); | |
| 102 extraElement.setAttribute('src', media_url); | |
| 103 extraElement.setAttribute('autoplay', 'true'); | |
| 104 extra.appendChild(extraElement); | |
| 105 } | |
| 106 } | |
| 107 | |
| 108 if (queryString('track')) { | |
| 109 // Process query string for track (caption). | |
| 110 // Set the track file name. | |
| 111 // TODO(imasaki@chromium.org): add query parameters hardcoded here. | |
| 112 var track_file = queryString('track'); | |
| 113 var trackElement = document.createElement('track'); | |
| 114 trackElement.setAttribute('id', 'track'); | |
| 115 trackElement.setAttribute('kind', 'captions'); | |
| 116 trackElement.setAttribute('src', track_file); | |
| 117 trackElement.setAttribute('srclang', 'en'); | |
| 118 trackElement.setAttribute('label', 'English'); | |
| 119 trackElement.setAttribute('default', 'true'); | |
| 120 player.appendChild(trackElement); | |
| 121 } | |
| 122 | |
| 123 if (queryString('actions')) { | |
| 124 // Action query string is a list of actions. An action consists of a | |
| 125 // time, action, action_argument triple (delimited by '|'). | |
| 126 // For example, '1000|seek|4000' means 'At second 1, seek to second 4.' | |
| 127 // Or '1000|pause|0|2000|play|0' means 'At second 1, pause the video. | |
| 128 // At second 2, play the video.' | |
| 129 var original_actions = queryString('actions').split('|'); | |
| 130 if ((original_actions.length % 3) != 0) { | |
| 131 // The action list is a list of triples. Otherwise, it fails. | |
| 132 document.title = 'FAIL Action length=' + original_actions.length + | |
| 133 ' is not multiple of 3'; | |
| 134 ok = false; | |
| 135 } | |
| 136 for (var i = 0; i < original_actions.length / 3; i++) { | |
| 137 setTimeout(translateCommand(original_actions[3 * i + 1], | |
| 138 original_actions[3 * i + 2]), | |
| 139 parseInt(original_actions[3 * i])); | |
| 140 } | |
| 141 } | |
| 142 | |
| 143 // Used for playing the video in the media_jerky.py test. | |
| 144 function playMedia() { | |
| 145 var player = document.getElementById('player'); | |
| 146 player.style.opacity = '1'; | |
| 147 player.play(); | |
| 148 } | |
| 149 | |
| 150 // Called in the body onload event in media_jerky.html. | |
| 151 function setPattern() { | |
| 152 var main = document.getElementById('main'); | |
| 153 main.style.backgroundColor = '#50dead'; | |
| 154 } | |
| 155 | |
| OLD | NEW |