"Simple Html5 Video Player"
Bootstrap 4.1.1 Snippet by mketr02

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="video-container"> <video id="videoPlayer" controls> <source src="your-video-file.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div class="controls"> <button onclick="playVideo()">Play</button> <button onclick="pauseVideo()">Pause</button> <label for="volumeControl">Volume: </label> <input type="range" id="volumeControl" min="0" max="1" step="0.1" onchange="setVolume(this.value)"> </div> </div> <a href="https://etemambalaj.com.tr/">Visit</a>
.video-container { max-width: 640px; margin: auto; text-align: center; } video { width: 100%; height: auto; } .controls { display: flex; justify-content: center; align-items: center; margin-top: 10px; } .controls button, .controls input[type=range] { margin: 0 5px; }
const video = document.getElementById('videoPlayer'); function playVideo() { video.play(); } function pauseVideo() { video.pause(); } function setVolume(volume) { video.volume = volume; }

Related: See More


Questions / Comments: