Embed own video player to website @ 肖恩D++

Embed own video player to website

Posted on March 18th, 2010 Sean Add comments

Sometimes I hate to embed Youtube to my website, cause somehow it seems like my friends in china can’t watch them. What I need just embed our own video player into the website:

first, need a free player. There are many streaming player such jwplayer, flowplayer, etc. I prefer flowplayer, cause it’s simple. (download from here)
Unzip, put all files into web server and choose an easily remembered place as you will place a path to these files later in your web pages.

To include file flowplayer-3.1.4.min.js in the web page you place the following tag in the HEAD section of your web page:

XHTML

<script src="yourpath/flowplayer-3.1.4.min.js"></script>

1

<script src="yourpath/flowplayer-3.1.4.min.js"></script>
To place the link to your video file in the web page, the simplest way is to use the following A tag on your web page. The video will automatically play there:

XHTML

<a href="http://www.mywebsite.com/myVideo.flv" style="display:block;width:425px;height:300px;" id="player"></a>

1
2
3

<a href="http://www.mywebsite.com/myVideo.flv"
    style="display:block;width:425px;height:300px;"
    id="player"></a>
Finally, to load the player on the A tag just described, you place the following script in your page, following the A tag:

XHTML

<script language="JavaScript"> flowplayer("player", "yourpath/flowplayer-3.1.5.swf"); </script>

1
2
3

<script language="JavaScript">
flowplayer("player", "yourpath/flowplayer-3.1.5.swf");
</script>

Also, I really hate autoplay the video when loading pages. So we can modify the configuration:

<script language="JavaScript"> 
flowplayer("player", "yourpath/flowplayer-3.1.5.swf", { 
    clip:  { 
    autoPlay: false, 
    autoBuffering: true 
    } 
}); 
</script>

flowplayer("player", "yourpath/flowplayer-3.1.5.swf", {

clip: {

autoPlay: false,

autoBuffering: true

}

});

</script>

So a complete functional web page that plays videos with Flowplayer is:

<html> 
<head> 
  <title>Your Title</title> 
  <script src="yourpath/flowplayer-3.1.4.min.js"></script> 
</head> 
<body> 
 
<a href="http://www.mywebsite.com/myVideo.flv"  
  style="display:block;width:425px;height:300px;"  
  id="player"> 
</a> 
 
<script language="JavaScript">
flowplayer("player", "yourpath/flowplayer-3.1.5.swf", { 
  clip:  { 
  autoPlay: false, 
  autoBuffering: true 
  } 
}); 
</script>
</body> 
</html>