sonygod/video-control.html

## video-control.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Video Element</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="main.css"/>
    <style>
        .control{
            font-size: 1.5rem;
            padding: 0.25rem 2rem;
            min-width: 10rem;
            margin: 0.5rem 0;
            cursor: pointer;
        }
        ::cue{
            font-size: 20px;
            color: #333;
            background-color: rgba(255, 200, 10, 0.64);
        }
        ::cue(b){
            text-transform: uppercase;
            color: red;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML Video Element</h1>
    </header>
    <main>
        <video controls id="video" poster="archer-bob.jpg">
            <source src="./video/lion-sample.mp4" type="video/mp4"/>
            <source src="./video/lion-sample.webm" type="video/webm"/>
            <source src="./video/lion-sample.ogv" type="video/ogg"/>
            <source src="./video/lion-sample.3gp" type="video/3gp"/>

            <track default
                    src="./video/lion1.vtt"
                    kind="captions"
                    srclang="en"
                    label="English Captions"/>

            <p><a href="" download>Download the Video</a></p>
        </video><br/>
        <button id="btnPlay" class="control">Play</button><br/>
        <button id="btnPaws" class="control">Pause</button><br/>
        <button id="btnStop" class="control">Stop</button><br/>
        <button id="btnRew" class="control">Rewind</button><br/>
        <button id="btnFF" class="control">Fast-forward</button><br/>
    </main>
    <script>
        let vid;
        document.addEventListener('DOMContentLoaded', init);

        function init(){
            document.getElementById('btnPlay').addEventListener('click', play);
            document.getElementById('btnPaws').addEventListener('click', paws);
            document.getElementById('btnStop').addEventListener('click', stop);
            document.getElementById('btnRew').addEventListener('click', rew);
            document.getElementById('btnFF').addEventListener('click', ff);
            vid = document.getElementById('video');
            console.log( vid );
            console.log({vid})
            let mediaType = vid.type;
            let str = vid.canPlayType("video/mp4");
            console.log(str);
            vid.volume = 0.9;  //  0 - 1
        }

        function play(ev){
            vid.play()
            .then(()=>{
                console.log('video is playing')
            })
            .catch((err)=>{
                console.log( {err} );
            });
            //after the video starts to play you can access text tracks
            let tt = vid.textTracks;
            let cues = tt[0].cues;
            console.log(tt);
            console.log(`There are ${tt.length} text tracks`);
            console.log( tt[0] );
            console.log( cues );
            console.log( cues.length );
            console.log( cues[0] );
            console.log( cues[0].text );
        }
        function paws(ev){
            vid.pause();
            console.log( vid.currentTime, "of", vid.duration, "seconds played");
            console.log('video is paused. No Promise here');
        }
        function stop(ev){
            vid.pause();
            console.log( vid.currentTime);
            vid.currentTime = 0;
        }
        function rew(ev){
            console.log( vid.currentTime);
            if( ! vid.fastSeek ){
                vid.currentTime -= 20;
            }else{
                vid.fastSeek(-20)
                .then(()=>{
                    console.log('Video skipped forward 10 seconds')
                })
                .catch(err=>{
                    console.log({err});
                })
            }
            console.log( vid.currentTime);
        }
        function ff(ev){
            console.log( vid.currentTime);
            if( ! vid.fastSeek ){
                vid.currentTime += 20;
            }else{
                vid.fastSeek(20)
                .then(()=>{
                    console.log('Video skipped forward 10 seconds')
                })
                .catch(err=>{
                    console.log({err});
                })
            }
            console.log( vid.currentTime);
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>HTML Video Element</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="main.css"/>
	<style>
	.control{
	font-size: 1.5rem;
	padding: 0.25rem 2rem;
	min-width: 10rem;
	margin: 0.5rem 0;
	cursor: pointer;
	}
	::cue{
	font-size: 20px;
	color: #333;
	background-color: rgba(255, 200, 10, 0.64);
	}
	::cue(b){
	text-transform: uppercase;
	color: red;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>HTML Video Element</h1>
	</header>
	<main>
	<video controls id="video" poster="archer-bob.jpg">
	<source src="./video/lion-sample.mp4" type="video/mp4"/>
	<source src="./video/lion-sample.webm" type="video/webm"/>
	<source src="./video/lion-sample.ogv" type="video/ogg"/>
	<source src="./video/lion-sample.3gp" type="video/3gp"/>

	<track default
	src="./video/lion1.vtt"
	kind="captions"
	srclang="en"
	label="English Captions"/>

	<p><a href="" download>Download the Video</a></p>
	</video><br/>
	<button id="btnPlay" class="control">Play</button><br/>
	<button id="btnPaws" class="control">Pause</button><br/>
	<button id="btnStop" class="control">Stop</button><br/>
	<button id="btnRew" class="control">Rewind</button><br/>
	<button id="btnFF" class="control">Fast-forward</button><br/>
	</main>
	<script>
	let vid;
	document.addEventListener('DOMContentLoaded', init);

	function init(){
	document.getElementById('btnPlay').addEventListener('click', play);
	document.getElementById('btnPaws').addEventListener('click', paws);
	document.getElementById('btnStop').addEventListener('click', stop);
	document.getElementById('btnRew').addEventListener('click', rew);
	document.getElementById('btnFF').addEventListener('click', ff);
	vid = document.getElementById('video');
	console.log( vid );
	console.log({vid})
	let mediaType = vid.type;
	let str = vid.canPlayType("video/mp4");
	console.log(str);
	vid.volume = 0.9; // 0 - 1
	}

	function play(ev){
	vid.play()
	.then(()=>{
	console.log('video is playing')
	})
	.catch((err)=>{
	console.log( {err} );
	});
	//after the video starts to play you can access text tracks
	let tt = vid.textTracks;
	let cues = tt[0].cues;
	console.log(tt);
	console.log(`There are ${tt.length} text tracks`);
	console.log( tt[0] );
	console.log( cues );
	console.log( cues.length );
	console.log( cues[0] );
	console.log( cues[0].text );
	}
	function paws(ev){
	vid.pause();
	console.log( vid.currentTime, "of", vid.duration, "seconds played");
	console.log('video is paused. No Promise here');
	}
	function stop(ev){
	vid.pause();
	console.log( vid.currentTime);
	vid.currentTime = 0;
	}
	function rew(ev){
	console.log( vid.currentTime);
	if( ! vid.fastSeek ){
	vid.currentTime -= 20;
	}else{
	vid.fastSeek(-20)
	.then(()=>{
	console.log('Video skipped forward 10 seconds')
	})
	.catch(err=>{
	console.log({err});
	})
	}
	console.log( vid.currentTime);
	}
	function ff(ev){
	console.log( vid.currentTime);
	if( ! vid.fastSeek ){
	vid.currentTime += 20;
	}else{
	vid.fastSeek(20)
	.then(()=>{
	console.log('Video skipped forward 10 seconds')
	})
	.catch(err=>{
	console.log({err});
	})
	}
	console.log( vid.currentTime);
	}
	</script>
	</body>
	</html>