Quando il video viene convertito in HTML5, si ottiene un set di file da caricare sul server e il seguente codice da inserire nella pagina HTML:
<link href="dvs/dvs_common_style.css" type="text/css" rel="stylesheet" />
<script src="dvs/ClassicSkinPlay.js" type="text/javascript"></script>
<script src="dvs/ClassicNeoSkinPlay.js" type="text/javascript"></script>
<script src="dvs/LineSkinPlay.js" type="text/javascript"></script>
<script src="dvs/LineSimpleSkinPlay.js" type="text/javascript"></script>
<script src="dvs/dvs_settings.js" type="text/javascript"></script>
<script src="dvs/DragObject.js" type="text/javascript"></script>
<script src="dvs/dragMaster.js" type="text/javascript"></script>
<script src="dvs/helpers.js" type="text/javascript"></script>
<script src="dvs/dvsplayer.js" type="text/javascript"></script><div id="dvsPlayer">
<video>
<source src="video/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<script type="text/javascript">
var dvsPlayer = new DVS_html5player();
var skin = new ClassicSkinPlay();
var sett = new dvsplay_settings();
//Qui puoi cambiare le impostazioni che sono definite nel file dvs_settings.js
dvsPlayer.Skin = skin;
dvsPlayer.settings=sett;
dvsPlayer.VideoTitle="Titolo video";
dvsPlayer.Init('dvsPlayer');
</script>
Parametri di base per il lettore sono definiti nel file /dvs/dvs_settings.js. È possibile modificare questi parametri a sua discrezione.
function dvsplay_settings () {
// Basic parameters
this.width=600;
this.height = 400;
this.backgroundColor="#000000";
this.controlBackgroundColor="#333333";
// Parameter affecting visibility of controls
this.displayMuteButton = true;
this.displayPlayPauseButton = true;
this.displayAutoPlayButton = true;
this.displayFullScreenModeButton = true;
this.displayVolumeControl = true;
this.displayTrackBar = true;
this.displayVolumeDigital = true;
this.displayVideoLengthDigitals = true;
// Parameters of the initial state of the player
this.startVolume = 0.5;
this.startPosition = 0;
this.muteButtonAtStart = false;
this.autoRewind = true;
this.autoPlay = true;
}
Nota: i parametri che sono definiti in questo file possono essere sovrascritti dai parametri che sono impostati dal Tema. Ad esempio, se si imposta la larghezza del lettore a 200, ma larghezza minima del Tema è impostata a 300, il player avrà la larghezza 300.
width
Larghezza del lettore (La larghezza si cambia automaticamente se si applica un Tema)
height
Altezza del lettore compreso il pannello di controllo (L'altezza si cambia automaticamente se si applica un Tema)
backgroundColor
Colore di riempimento del lettore nel formato RGB. Ad esempio, "#0000FF" sta per il colore blu. Se il video ha una risoluzione inferiore a quella del lettore, lo spazio viene riempito con il colore di riempimento.
controlBackgroundColor
Colore di riempimento del pannello di controllo nel formato RGB. Ad esempio, "#0000FF" sta per il colore blu.
displayMuteButton
Visualizzare/nascondere il pulsante Muto (true - visualizzare, false - non visualizzare)
displayPlayPauseButton
Visualizzare/nascondere il pulsante Play/Pausa (true - visualizzare, false - non visualizzare)
displayAutoPlayButton
Visualizzare/nascondere il pulsante AutoPlay (true - visualizzare, false - non visualizzare)
displayFullScreenModeButton
Visualizzare/nascondere il pulsante Modalità a schermo intero (Non tutti i browser supportano la riproduzione di video HTML5 in modalità a schermo intero)
displayVolumeControl
Visualizzare/nascondere il pulsante di controllo del volume (true - visualizzare, false - non visualizzare)
displayTrackBar
Visualizzare/nascondere la Barra di tracce (true - visualizzare, false - non visualizzare)
displayVolumeDigital
Visualizzare/nascondere i digitali di controllo del volume (true - visualizzare, false - non visualizzare)
displayVideoLengthDigitals
Visualizzare/nascondere i digitali che mostrano la lunghezza del video (true - visualizzare, false - non visualizzare)
startVolume
Livello del volume iniziale. I valori da 0 (muto) a 1 (massimo volume)
startPosition
Posizione iniziale di riproduzione. I valori da 0 (l'inizio del video) a 1 (la fine del video)
muteButtonAtStart
Lo stato del pulsante Muto all'inizio (true - silenziato, false - non silenziato)
autoRewind
Riavvolgimento automatico (true - la riproduzione si riavvia dopo che il video raggiunge la sua fine, false - la riproduzione si ferma alla fine del video)
autoPlay
Funzione autoplay (true - la riproduzione si avvia automaticamente dopo che la pagina viene caricata, false - la riproduzione inizia quando il pulsante Play è stato premuto)