зеркало из https://github.com/mozilla/shumway.git
161 строка
3.8 KiB
HTML
161 строка
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf8">
|
|
<style>
|
|
html {
|
|
background: #ccc;
|
|
}
|
|
</style>
|
|
<title>JWPlayer</title>
|
|
<script src="dat.gui.min.js"></script>
|
|
<script src="jwplayer.js"></script>
|
|
<script src="../../build/shuobject/shuobject.js"></script>
|
|
<script>
|
|
shuobject.hack('jwplayer', true);
|
|
jwplayer.key="CZ1NIKr/zc7LWAKtyMr+sToZQmznGTyYSxK3aw==";
|
|
</script>
|
|
<div id='player'></div>
|
|
<script>
|
|
var config = {
|
|
aspectratio: [ '16:9', '16:10', '4:3', '3:2', '1:1', '2.4:1' ],
|
|
autostart: false,
|
|
controls: true,
|
|
file: [ 'elephants_dream_640x360_2.30.mp4',
|
|
'big_buck_bunny_640x360_2.28.mp4',
|
|
'sintel_640x360_2.28.mp4' ],
|
|
height: 360,
|
|
image: [ 'elephants_dream_640x360.jpg',
|
|
'big_buck_bunny_640x360.jpg',
|
|
'sintel_640x360.jpg' ],
|
|
mute: false,
|
|
primary: [ 'flash', 'html5' ],
|
|
repeat: false,
|
|
skin: '',
|
|
width: 640,
|
|
androidhls: false,
|
|
hlslabels: '',
|
|
|
|
listbar: {
|
|
position: [ 'bar', 'bottom', 'right' ],
|
|
size: 180,
|
|
layout: [ 'extended', 'basic' ]
|
|
},
|
|
|
|
captions: {
|
|
color: '#ffffff',
|
|
fontSize: 15,
|
|
fontFamily: 'sans',
|
|
fontOpacity: 100,
|
|
backgroundColor: '#000000',
|
|
backgroundOpacity: 75,
|
|
edgeStyle: 'none',
|
|
windowColor: '#000000',
|
|
windowOpacity: 0
|
|
},
|
|
|
|
abouttext: 'JW Player 6.x.xxx',
|
|
aboutlink: 'http://www.jwplayer.com/learn-more/',
|
|
displaytitle: true,
|
|
fallback: false,
|
|
flashplayer: 'jwplayer.flash.swf',
|
|
html5player: 'jwplayer.html5.js',
|
|
startparam: '',
|
|
stagevideo: true,
|
|
stretching: [ 'uniform', 'exactfit', 'fill', 'none' ]
|
|
};
|
|
|
|
var playlist = [
|
|
{
|
|
image: "elephants_dream_640x360.jpg",
|
|
sources: [{file: "elephants_dream_640x360_2.30.mp4"}],
|
|
title: "Elephants Dream",
|
|
tracks: [{
|
|
file: "elephants_dream.srt"
|
|
}]
|
|
},
|
|
{
|
|
image: "big_buck_bunny_640x360.jpg",
|
|
sources: [{file: "big_buck_bunny_640x360_2.28.mp4"}],
|
|
title: "Big Buck Bunny",
|
|
tracks: [{
|
|
file: "big_buck_bunny.srt"
|
|
}]
|
|
}, {
|
|
image: "sintel_640x360.jpg",
|
|
sources: [{file: "sintel_640x360_2.28.mp4"}],
|
|
title: "Sintel Trailer",
|
|
tracks: [{
|
|
file: "sintel.srt"
|
|
}]
|
|
}
|
|
];
|
|
|
|
var proxy = {
|
|
'Load Playlist Block': function () {
|
|
jwplayer('player').load(playlist);
|
|
},
|
|
'Load Playlist RSS': function () {
|
|
jwplayer('player').load('playlist.rss');
|
|
}
|
|
};
|
|
|
|
function setupPlayer() {
|
|
jwplayer('player').setup(config);
|
|
}
|
|
|
|
function addOption(gui, controller, object, property, value) {
|
|
var setting;
|
|
|
|
if (Array.isArray(value)) {
|
|
object[property] = value[0];
|
|
setting = controller.add(object, property, value);
|
|
} else if (typeof value === 'object') {
|
|
var folder = gui.addFolder(property[0].toUpperCase() + property.slice(1));
|
|
for (var property in value) {
|
|
addOption(gui, folder, value, property, value[property]);
|
|
}
|
|
return;
|
|
} else if (typeof value === 'boolean') {
|
|
object[property] = value + '';
|
|
proxy[property] = value;
|
|
setting = controller.add(proxy, property);
|
|
setting.onChange(function (value) {
|
|
object[property] = +value;
|
|
});
|
|
} else if (typeof value === 'string' && value[0] === '#') {
|
|
object[property] = value.slice(1);
|
|
proxy[property] = value;
|
|
setting = controller.addColor(proxy, property);
|
|
setting.onChange(function (value) {
|
|
object[property] = value.slice(1);
|
|
});
|
|
} else {
|
|
setting = controller.add(object, property);
|
|
}
|
|
|
|
setting.onFinishChange(setupPlayer);
|
|
}
|
|
|
|
window.onload = function() {
|
|
var gui = new dat.GUI({ width: 400 });
|
|
gui.remember(config);
|
|
|
|
gui.add(proxy, 'Load Playlist Block');
|
|
gui.add(proxy, 'Load Playlist RSS');
|
|
|
|
var options = gui.addFolder('Basic');
|
|
options.open();
|
|
|
|
for (var property in config) {
|
|
var value = config[property];
|
|
|
|
if (property === 'abouttext') {
|
|
options = gui.addFolder('Other');
|
|
}
|
|
|
|
addOption(gui, options, config, property, value);
|
|
}
|
|
|
|
setupPlayer();
|
|
};
|
|
</script>
|