J
jamesdylangoldstein
So I tried to do my father a favor and convert his advertisements
to .flv and place them on his website. With Flash being $600, I found
an open-source .flv player and configured it. So today he called and
stated it isn't working with IE.
The script:
<script type="text/javascript" src="http://www.fivestarsuzuki.com/
video/swfobject.js"></script>
<script type="text/javascript">
<!--
/*
* Init and setup FlowPlayer. This example file shows 'advanced'
features like
* playlists and configuring with JavaScript. FlowPlayer.html is a
simpler example.
*/
var flowPlayer1;
function init() {
if (document.getElementById) {
flowPlayer1 = document.getElementById("FlowPlayer");
}
setInitialConfig();
}
// wait for the page to fully load before initializing
window.onload = init;
function setInitialConfig() {
fpConf.playList = clips;
fpConf.autoPlay = false;
fpConf.autoBuffering = false;
flowPlayer1.setConfig(fpConf);
}
/*
* This is the playlist with FLV videos and images. The images can have
a duration property
* and the flv video files can have start and end properties that give
the starting and
* ending positions in seconds. All these attributes (duration, start,
end) are optional.
*
* The start and end attributes really only work with the Flash Media
Server. I have had
* problems when thesting using Red5.
*/
var clips = [
{ name: 'ClickToPlay', url: 'xl7.jpg' },
{ name: 'ACTI', url: 'act1.flv', start: 1, end: 32 },
{ name: 'ACTI', url: 'act2.flv', start: 1, end: 32 },
{ name: 'XL7', url: '14xl7.flv', start: 1, end: 26 }
];
var fpConf = {
showPlayList: false,
baseURL: 'http://www.fivestarsuzuki.com/video',
bufferLength: 20,
loop: false,
videoHeight: 300,
hideControls: false,
showPlayListButtons: true,
progressBarColor1: 0xFF0000,
progressBarColor2: 0xFF0000,
bufferBarColor1: 0x00FF00,
bufferBarColor2: 0x00FF00,
progressBarBorderColor1: 0xAAAAAA,
progressBarBorderColor2: 0xAAAAAA
}
/*
* JavaScript event hanlders:
*/
function clipSelected(clipIndex) {
flowPlayer1.ToClip(clipIndex);
}
function play() {
flowPlayer1.DoPlay();
updateIsPlaying();
}
function pause() {
flowPlayer1.Pause();
updateIsPlaying();
}
function stop() {
flowPlayer1.DoStop();
updateIsPlaying();
}
function updateIsPlaying() {
var field = document.getElementById("playing");
field.value = "Playing: " + flowPlayer1.getIsPlaying() + ", paused : "
+ flowPlayer1.getIsPaused();
}
function seek() {
var seekTimeField = document.getElementById("seekTime");
flowPlayer1.Seek(seekTimeField.value);
}
function getTime() {
var time = flowPlayer1.getTime();
var timeField = document.getElementById("time");
timeField.value = time;
}
function getDuration() {
var value = flowPlayer1.getDuration();
var field = document.getElementById("duration");
field.value = value;
}
function getPercentLoaded() {
var value = flowPlayer1.getPercentLoaded();
var field = document.getElementById("loaded");
field.value = value;
}
function replaceConfig() {
// replace the playlist in our configuration
fpConf.playList = [
{ name: 'ACT1', url: 'act1.flv' } ];
fpConf.autoBuffering = true;
fpConf.autoPlay = true;
flowPlayer1.setConfig(fpConf);
}
/*
* Flash callback handlers. The player calls these on specific events:
*/
function onClipDone(clip) {
addClipEvent("clip done : " + describeClip(clip));
}
function onClipChanged(clip) {
addClipEvent("changed to clip : " + clip.name);
}
function onLoadBegin(clip) {
//addClipEvent("started loading : " + clip.name);
}
function onStreamNotFound(clip) {
addClipEvent("stream not found: " + describeClip(clip));
}
function onPlay(clip) {
addClipEvent("play: " + clip.name);
}
function onStop(clip) {
addClipEvent("stop: " + clip.name);
}
function onPause(clip) {
addClipEvent("paused: " + clip.name);
}
function onResume(clip) {
addClipEvent("resumed: " + clip.name);
}
function onCuePoint(cuePoint) {
addClipEvent("cue point received, time: " + cuePoint.time + ", type '"
+ cuePoint.type + "', thumb: " + cuePoint.thumb + ", parameters: " +
cuePoint.parameters);
}
/*
* Helpers:
*/
function addClipEvent(desc) {
var events = document.getElementById("events");
events.appendChild(document.createTextNode(desc));
events.appendChild(document.createElement("br"));
}
function describeClip(clip) {
return "Name: " + clip.name + ", baseUrl: " + clip.baseUrl + ",
fileName: " + clip.fileName +
", start: " + clip.start + ", end: " + clip.end + ", protected: " +
clip.protected +
", linkUrl: " + clip.linkUrl + ", linkWindow: " + clip.linkWindow + ",
controlEnabled: " +
clip.controlEnabled;
}
-->
</script>
<div id="flowplayerholder" style="width:600px; margin:0 auto; ">
This will be replaced by the player.
</div>
<script type="text/javascript">
// <![CDATA[
var fo = new SWFObject("video/FlowPlayerWhite.swf", "FlowPlayer",
"468", "350", "7", "#ffffff", true);
// need this next line for local testing, it's optional if your swf is
on the same domain as your html page
fo.addParam("allowScriptAccess", "always");
fo.addParam("flashVars", "config={configInject: true}");
fo.write("flowplayerholder");
// ]]>
</script>
<a href="javascript: clipSelected(1)"><b>Play ACTI</b></
a> <a href="javascript: clipSelected(2)"><b>Play ACTII</b></
a> <a href="javascript: clipSelected(3)"><b>Play XL7
Commercial</b></a></td>
Reply With Quote
to .flv and place them on his website. With Flash being $600, I found
an open-source .flv player and configured it. So today he called and
stated it isn't working with IE.
The script:
<script type="text/javascript" src="http://www.fivestarsuzuki.com/
video/swfobject.js"></script>
<script type="text/javascript">
<!--
/*
* Init and setup FlowPlayer. This example file shows 'advanced'
features like
* playlists and configuring with JavaScript. FlowPlayer.html is a
simpler example.
*/
var flowPlayer1;
function init() {
if (document.getElementById) {
flowPlayer1 = document.getElementById("FlowPlayer");
}
setInitialConfig();
}
// wait for the page to fully load before initializing
window.onload = init;
function setInitialConfig() {
fpConf.playList = clips;
fpConf.autoPlay = false;
fpConf.autoBuffering = false;
flowPlayer1.setConfig(fpConf);
}
/*
* This is the playlist with FLV videos and images. The images can have
a duration property
* and the flv video files can have start and end properties that give
the starting and
* ending positions in seconds. All these attributes (duration, start,
end) are optional.
*
* The start and end attributes really only work with the Flash Media
Server. I have had
* problems when thesting using Red5.
*/
var clips = [
{ name: 'ClickToPlay', url: 'xl7.jpg' },
{ name: 'ACTI', url: 'act1.flv', start: 1, end: 32 },
{ name: 'ACTI', url: 'act2.flv', start: 1, end: 32 },
{ name: 'XL7', url: '14xl7.flv', start: 1, end: 26 }
];
var fpConf = {
showPlayList: false,
baseURL: 'http://www.fivestarsuzuki.com/video',
bufferLength: 20,
loop: false,
videoHeight: 300,
hideControls: false,
showPlayListButtons: true,
progressBarColor1: 0xFF0000,
progressBarColor2: 0xFF0000,
bufferBarColor1: 0x00FF00,
bufferBarColor2: 0x00FF00,
progressBarBorderColor1: 0xAAAAAA,
progressBarBorderColor2: 0xAAAAAA
}
/*
* JavaScript event hanlders:
*/
function clipSelected(clipIndex) {
flowPlayer1.ToClip(clipIndex);
}
function play() {
flowPlayer1.DoPlay();
updateIsPlaying();
}
function pause() {
flowPlayer1.Pause();
updateIsPlaying();
}
function stop() {
flowPlayer1.DoStop();
updateIsPlaying();
}
function updateIsPlaying() {
var field = document.getElementById("playing");
field.value = "Playing: " + flowPlayer1.getIsPlaying() + ", paused : "
+ flowPlayer1.getIsPaused();
}
function seek() {
var seekTimeField = document.getElementById("seekTime");
flowPlayer1.Seek(seekTimeField.value);
}
function getTime() {
var time = flowPlayer1.getTime();
var timeField = document.getElementById("time");
timeField.value = time;
}
function getDuration() {
var value = flowPlayer1.getDuration();
var field = document.getElementById("duration");
field.value = value;
}
function getPercentLoaded() {
var value = flowPlayer1.getPercentLoaded();
var field = document.getElementById("loaded");
field.value = value;
}
function replaceConfig() {
// replace the playlist in our configuration
fpConf.playList = [
{ name: 'ACT1', url: 'act1.flv' } ];
fpConf.autoBuffering = true;
fpConf.autoPlay = true;
flowPlayer1.setConfig(fpConf);
}
/*
* Flash callback handlers. The player calls these on specific events:
*/
function onClipDone(clip) {
addClipEvent("clip done : " + describeClip(clip));
}
function onClipChanged(clip) {
addClipEvent("changed to clip : " + clip.name);
}
function onLoadBegin(clip) {
//addClipEvent("started loading : " + clip.name);
}
function onStreamNotFound(clip) {
addClipEvent("stream not found: " + describeClip(clip));
}
function onPlay(clip) {
addClipEvent("play: " + clip.name);
}
function onStop(clip) {
addClipEvent("stop: " + clip.name);
}
function onPause(clip) {
addClipEvent("paused: " + clip.name);
}
function onResume(clip) {
addClipEvent("resumed: " + clip.name);
}
function onCuePoint(cuePoint) {
addClipEvent("cue point received, time: " + cuePoint.time + ", type '"
+ cuePoint.type + "', thumb: " + cuePoint.thumb + ", parameters: " +
cuePoint.parameters);
}
/*
* Helpers:
*/
function addClipEvent(desc) {
var events = document.getElementById("events");
events.appendChild(document.createTextNode(desc));
events.appendChild(document.createElement("br"));
}
function describeClip(clip) {
return "Name: " + clip.name + ", baseUrl: " + clip.baseUrl + ",
fileName: " + clip.fileName +
", start: " + clip.start + ", end: " + clip.end + ", protected: " +
clip.protected +
", linkUrl: " + clip.linkUrl + ", linkWindow: " + clip.linkWindow + ",
controlEnabled: " +
clip.controlEnabled;
}
-->
</script>
<div id="flowplayerholder" style="width:600px; margin:0 auto; ">
This will be replaced by the player.
</div>
<script type="text/javascript">
// <![CDATA[
var fo = new SWFObject("video/FlowPlayerWhite.swf", "FlowPlayer",
"468", "350", "7", "#ffffff", true);
// need this next line for local testing, it's optional if your swf is
on the same domain as your html page
fo.addParam("allowScriptAccess", "always");
fo.addParam("flashVars", "config={configInject: true}");
fo.write("flowplayerholder");
// ]]>
</script>
<a href="javascript: clipSelected(1)"><b>Play ACTI</b></
a> <a href="javascript: clipSelected(2)"><b>Play ACTII</b></
a> <a href="javascript: clipSelected(3)"><b>Play XL7
Commercial</b></a></td>
Reply With Quote