×
Namespaces

Variants
Actions

How to customize HTML5 video player with JavaScript

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (16 Apr 2012)
Last edited: hamishwillee (27 Jul 2012)

This article explains how to customize the HTML5 video player with JavaScript

Contents

Introduction

Example code

HTML file - index.html

<body>
<section id="custom">
<video id="customMovie" width="800" height="600">
<source src="myvids/first.mp4>
</video>
<nav>
<div id="
controls">
<button type="
button" id="playVideo">
</div>
<div id="
initialBar">
<div id="
videoProgressBar"></div>
</div>
<div style="
clear:both"></div>
</nav>
<section>
</body>
</html>

CSS file - main.css

body{
text-align: center;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
#custom{
width: 700px;
margin: 10px auto;
padding: 5x;
background: red;
border: 4px solid black;
border-radius: 10px;
}
nav{
margin: 5px 0px;
}
#buttons {
 
 
JavaScript file - main.js
 
function doFirst() {
barSize=600;
customMovie = document.getElementById('customMovie');
playButton = document.getElementById('playButton');
bar = document.getElementById('defaultBar');
progressBar = document.getElementById('progressBar');
 
}

Summary

Tested with

This page was last modified on 27 July 2012, at 08:26.
34 page views in the last 30 days.