| 1 |
<canvas height="400" width="500"> |
<canvas height="400" width="500"> |
| 2 |
<view height="400" width="500" oninit="initialize_player()" onclick="display_click()"> |
<simplelayout axis="y" spacing="0"/> |
| 3 |
<view name="display_image"> |
|
| 4 |
</view> |
<include href="methods.lzx"/> |
| 5 |
<method name="initialize_player"> |
<include href="classes.lzx"/> |
| 6 |
this.setAttribute('bgcolor', color_bg); |
<include href="resources.lzx"/> |
| 7 |
if (image) { |
<include href="flashvars.lzx"/> |
| 8 |
// Check for a local image. |
|
| 9 |
if (image.indexof(':') == -1) { |
/* |
| 10 |
image = 'http:' + image; |
* NOTES: |
| 11 |
} |
* |
| 12 |
display_image.setAttribute('source', image); |
* - Icon / graphic resources for the buttons are defined in resources.lzx |
| 13 |
display_image.setAttribute('x', image_x); |
* |
| 14 |
display_image.setAttribute('y', image_y); |
* |
| 15 |
} |
* TODO: |
| 16 |
</method> |
* |
| 17 |
<method name="display_click"> |
* - Move more of the button logic to classes and then move those classes to individual files (http://wiki.openlaszlo.org/Best_practices). |
| 18 |
display_image.setAttribute('opacity', 0); |
* |
| 19 |
switch (displayclick) { |
* - Extend slider control to create a custom video slider |
| 20 |
case 'none': |
* |
| 21 |
break; |
* - Decouple playback controls from the actual playback functions, to make theming simpler |
| 22 |
case 'link': |
* |
| 23 |
lz.Browser.loadURL(link); |
* - Scale video within canvas while maintaining an appropriate aspect ratio (16:9,16:10,4:3) |
| 24 |
break; |
* |
| 25 |
case 'play': |
* - pre-roll, post-roll, mid-roll, bug functionality |
| 26 |
default: |
* |
| 27 |
video_stream_button.start_stream(); |
*/ |
| 28 |
} |
|
| 29 |
</method> |
<!-- media player application --> |
| 30 |
<videoview width="500" height="350" clickable="true"> |
<view height="${parent.height-controls.height}" width="${parent.width}" oninit="methods.initialize_player();" onclick="methods.display_click()" bgcolor="0x000000"> |
| 31 |
<mediastream id="media_player" type="http" autoplay="false" oninit="this.setAttribute('url', file)" /> |
|
| 32 |
</videoview> |
<view name="display_image"/> |
| 33 |
<view id="view_logo" oninit="set_logo()"> |
|
| 34 |
<!-- This will set the logo to the &logo= variable passed to the player. --> |
<!-- videoview height value is currently hardcoded to handle 16/10 (0.625) aspect ratio, need to figure out how to determine a streams dimensions --> |
| 35 |
<method name="set_logo"> |
<videoview id="playback_window" height="${parent.height*0.625}" width="${parent.width}" clickable="true" valign="middle"> |
| 36 |
// Set the default to the druplicon. |
|
| 37 |
if (display_logo && !logo) { |
<mediastream id="media_player" type="http" autoplay="false" onstop="methods.reset_stream();"> |
| 38 |
logo = 'resources/druplicon.png'; |
|
| 39 |
} |
<attribute name="stream_state" value="0" /> |
| 40 |
// Check for a local image. |
|
| 41 |
if (logo.indexof(':') == -1) { |
<handler name="oninit"> |
| 42 |
logo = 'http:' + logo; |
<!-- accepts URL to video file from embedded flashvars --> |
| 43 |
} |
this.setAttribute('url', file); |
| 44 |
this.setAttribute('source', logo); |
</handler> |
| 45 |
this.setAttribute('x', logo_x); |
|
| 46 |
this.setAttribute('y', logo_y); |
<!-- updates time display and position of the progress slider as media_player.time changes. --> |
| 47 |
</method> |
<handler name="ontime"> |
| 48 |
</view> |
position_text.setAttribute('text', secondstominutes(media_player.time) + ' / ' + secondstominutes(media_player.totaltime)); |
| 49 |
<view x="0" y="351" name="video_stream"> |
position_slider.setAttribute('value', media_player.time * 1000); |
| 50 |
<simplelayout axis="x" spacing="10"/> |
</handler> |
| 51 |
<button onclick="start_stream();" name="video_stream_button"> |
|
| 52 |
<attribute name="stream_state" value="0" /> |
<!-- updates the cache progress bar as media_player.progress changes. --> |
| 53 |
<method name="start_stream"> |
<handler name="onprogress"> |
| 54 |
if (!this.getAttribute('stream_state')) { |
cache_progress.setAttribute('width', media_player.progress * position_slider.width); |
| 55 |
media_player.play(); |
</handler> |
| 56 |
view_logo.setAttribute('opacity', 0.25); |
|
| 57 |
this.setAttribute('text', 'Pause'); |
</mediastream> |
| 58 |
this.setAttribute('stream_state', 1); |
|
| 59 |
} |
</videoview> |
| 60 |
else { |
|
| 61 |
media_player.pause(); |
<!-- Additional controls to replay, embed, email the current media. --> |
| 62 |
var is_paused = media_player.getAttribute('paused'); |
<other_tasks id="other_tasks"/> |
| 63 |
view_logo.setAttribute('opacity', (is_paused ? 0.75 : 0.25)); |
|
| 64 |
this.setAttribute('text', (is_paused ? 'Play' : 'Pause')); |
<view name="padding" height="$once{parent.height}" width="$once{parent.width-16}" align="center" valign="middle"> |
| 65 |
} |
|
| 66 |
</method> |
<volume_control id="volume_control"/> |
| 67 |
Play |
|
| 68 |
</button> |
</view> |
| 69 |
</view> |
|
| 70 |
</view> |
<view id="view_logo" oninit="methods.set_logo()"/> |
| 71 |
|
|
| 72 |
|
</view> |
| 73 |
|
|
| 74 |
|
<chrome id="controls"/> // contains all the UI chrome classes |
| 75 |
|
|
| 76 |
</canvas> |
</canvas> |
Parent Directory
| 
Revision Log
| 
Revision Graph
| 
Patch