Noob alert! I'm not a coder by trade. I'm just learning.
The following code works perfectly for playing a local video file. I'd like to be able to add buttons to modify the controls, such as mute/un-mute, play/pause, faster/slower, etc. but I've been unsuccessful in adding code that will allow me to do so. I
believe once I see how to modify one element, such as mute/un-mute, then I'll be able to do similar with the others. I just need a helping hand getting started. Any help on how to get a working mute/un-mute button will be greatly appreciated.
Thanks in advance,
Andrew
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Local File Player</title>
<!--SOURCE: 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>
The example isn't helping. The example is for loading a video via a URL. The code I'm using is for loading a local file. I could be wrong, but the syntax for the button script I don't believe is my issue. It would simply be something like the following.
function muteUnmute() {
if (myVAR.muted)
myVAR.muted = false;
else
myVAR.muted = true;
}
What I haven't been able to do is identify &/or set the global variable that I will use to identify the video. ("myVAR" in the code example just above.) I thought setting the following just above the main function would be correct, but it doesn't work.
None
0 Points
3 Posts
Manipulating controls with video playback of a local file
Jun 20, 2017 02:50 PM|andrew.lindsay|LINK
Noob alert! I'm not a coder by trade. I'm just learning.
The following code works perfectly for playing a local video file. I'd like to be able to add buttons to modify the controls, such as mute/un-mute, play/pause, faster/slower, etc. but I've been unsuccessful in adding code that will allow me to do so. I believe once I see how to modify one element, such as mute/un-mute, then I'll be able to do similar with the others. I just need a helping hand getting started. Any help on how to get a working mute/un-mute button will be greatly appreciated.
Thanks in advance,
Andrew
All-Star
57874 Points
15507 Posts
Re: Manipulating controls with video playback of a local file
Jun 20, 2017 03:02 PM|bruce (sqlwork.com)|LINK
google is your friend:
http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473
None
0 Points
3 Posts
Re: Manipulating controls with video playback of a local file
Jun 20, 2017 03:24 PM|andrew.lindsay|LINK
The example isn't helping. The example is for loading a video via a URL. The code I'm using is for loading a local file. I could be wrong, but the syntax for the button script I don't believe is my issue. It would simply be something like the following.
What I haven't been able to do is identify &/or set the global variable that I will use to identify the video. ("myVAR" in the code example just above.) I thought setting the following just above the main function would be correct, but it doesn't work.
I'm still stuck.
Thanks,
Andrew
None
0 Points
3 Posts
Re: Manipulating controls with video playback of a local file
Jun 20, 2017 08:14 PM|andrew.lindsay|LINK
Never mind. I figured it out.