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 |