Menu
Noob alert. I’m not a coder by trade. I’m just learning.
For the life of me, I can’t figure out how to manipulate the video controls on this page. The page loads a local video, just as intended, but I’d like to add button controls for play/pause, mute/unmute, etc. I believe once I get one control working then I can replicate the process for others. But I’m just not figuring out how to add the control. Any help will be greatly appreciated.
Thanks in advance,
Andrew
[CODE]<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title>Local File Player</title>
<!–SOURCE OF EXAMPLE: http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/–>
<style>
video, input {
display: block;
}
input {
width: 100%;
}
.info {
background-color: aqua;
}
.error {
background-color: red;
color: white;
}
</style>
<!–
<script type=”text/javascript” src=”js/jquery.js”></script>
–>
<script type=”text/javascript”>
function init() { // Master function, encapsulates all functions
(function localFileVideoPlayer() {
‘use strict’
var URL = window.URL || window.webkitURL
var displayMessage = function (message, isError) {
var element = document.querySelector(‘#message’)
element.innerHTML = message
element.className = isError ? ‘error’ : ‘info’
}
var playSelectedFile = function (event) {
var file = this.files[0]
var type = file.type
var videoNode = document.querySelector(‘video’)
var canPlay = videoNode.canPlayType(type)
if (canPlay === ”) canPlay = ‘no’
var message = ‘Can play type “‘ + type + ‘”: ‘ + canPlay
var isError = canPlay === ‘no’
displayMessage(message, isError)
if (isError) {
return
}
var fileURL = URL.createObjectURL(file)
videoNode.src = fileURL
}
var inputNode = document.querySelector(‘input’)
inputNode.addEventListener(‘change’, playSelectedFile, false)
})()
}// end of master
function muteUnmute() {
alert(“need a working control”)
}
</script>
</head>
<body onload=”init();”>
<h1>HTML5 local video file player example</h1>
<div id=”message”></div>
<input type=”file” accept=”video/*” />
<video id=”video” controls autoplay></video>
<br />
<button onclick=”muteUnmute()” style=”cursor:pointer”>Mute/Unmute</button>
</body>
</html>