Manipulating controls with video playback of a local fileRSS

3 replies

Last post Jun 20, 2017 08:14 PM by andrew.lindsay

‹ Previous Thread|Next Thread ›

Shortcuts

andrew.linds...

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

<!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>

- Reply
bruce (sqlwo...
All-Star

50844 Points

12086 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

bruce (sqlwork.com)
- Reply
andrew.linds...
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.
```
    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.
```
var myVAR= document.getElementById("video"); 
```
I'm still stuck.

Thanks,
Andrew

andrew.linds...

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.

<!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>

</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>
    <br />
    <span class="basic">[Current Playback Speed: <span id="speed"></span>]&nbsp; &nbsp;</span>
    <br />
    <span class="basic">&nbsp; &nbsp;[Playback position: <span id="elapsed"></span> of <span id="duration"></span>]</span>
    <br />


    <script type="text/javascript">
        var vid = document.getElementById("video");
        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

        // ------------  SOUND ------------  
        function muteUnmute() {
            if (vid.muted)
                vid.muted = false;
            else
                vid.muted = true;
        }
</body>
</html>

‹ Previous Thread|Next Thread ›