Go to the menu - Go to the contents

[Site map] You are here --- > Newbies Paradise > Tutorials > Unofficial > Website > XHTML / CSS > Reading a tutorial

Streaming videos on your site

Avatar
 Author : William
Creation : : on 03/02/2008 05:00:49 PM
Last modification: : on 03/12/2008 01:12:42 PM
Rate and comment this tutorial
Print this tutorial
You are about to read a tutorial written by a member of this website. Although the author probably invested every effort to make this tutorial's content correct, we can not guarantee that the information on this page is 100% exact. Please keep this in mind when reading this tutorial. ;o)
In this tutorial, I will explain how to put a video on a personal website. This has nothing complicated :) .

This is very useful if you have a video to put on your website. Mind you, with sites like Youtube, Wideo, DailyMotion and this is easier. But if you want to use their server and their own webpages, this tutorial is for you ^^ .

The 3 codes that I am going to give will only work if your users have the player in question and the necessary codecs.


Let's gooooo! :p
Chapter Contents :

Windows Media Player

Supported formats



This player is compatible with the following formats:




A minimum of code



Here's the code:

Code: HTML
1
<embed type="application/x-mplayer2" width="200px" height="200px"  showcontrols="0" src="myvideo.wmv" />


If you want your site conform to the recommendations of the W3C you should not use this code as the embed tag is no longer permitted! This tag has been replaced by 'object'.



Here's a valid code xHTML:

Code: HTML
1
2
3
<object type="application/x-mplayer2" style="width: 200px; height: 200px;" data="myvideo.wmv">
<param name="filename" value="myvideo.wmv"/>
</object>



Some information:


It is your job to replace "myvideo.wmv" by the address of your file ;) .

Real Audio Player

Supported formats:




Real player accepts the following file types:


HTML Code :


Code: HTML
1
<embed type="audio/x-pn-realaudio-plugin" src="myvideo.ram" height="200px" width="200px" controls="all" console="video"/>


Real player does not accept 'object' tag ;) be careful.



The attribute 'console' taks the value of a unique identifier for all controls in the same movie.
The attribute 'controls' takes one of the following values:


AttributeDescription
All All
ControlPanel Buttons play / pause / stop and progress bar
PlayButton Play / pause button
PlayOnlyButton PlayOnlyButton
PauseButton Only pause button
StopButton Only stop button
PauseButton Only pause button
FFCtrl Forward
RWCtrl Backward
MuteCtrl Enable / Disable sound
MuteVolume Enable / Disable sound and volume control
VolumeSlider Volume Control
PositionSlider Progress Bar
TACCtrl Information on the clip


With that you will have enough to customize your player ^^ .

Quick Time Player

Supported formats:



With Quicktime you can read the following formats:



Most of the time, this player is used to read mov files as they are specific to Quicktime.


HTML Code :



Code: HTML
1
2
3
<object type="video/quicktime" style="width: 200px; height: 200px;" data="myvid.mov">
<param name="src" value="myvid.mov"/>
</object>
As a bonus :p , here is how to activate the automatic reading of the file once the page is fully loaded :

Code: HTML - Show / hide line numbering
  1. <param name="autostart" value="1" /> <!-- for Windows Media -->
  2. <param name="autostart" value="true" /> <!-- for Real -->
  3. <param name="autoplay" value="true" /> <!-- for Quicktime -->


That's all ! ;)

I hope this tutorial taught you some tips! :p
Author : William
Rate and comment this tutorial
Print this tutorial

Number of Newbies connected 5 Newbies Connected | SQL requests 7 Requests | Page loading delay 0.0342s (0.0212s)

Change your template - Learn more about NP - Site map
Contact us - Privacy Policy -->
Terms of use - RSS feed - XHTML 1.0 - CSS 2.0

There is nothing else to read, you have to go up now !