Progress.addEventListener( "mousemove", (e) => mousedown & scrub(e)) Progress.addEventListener( "mousedown", () => (mousedown = true)) Progress.addEventListener( "click", scrub) Video.addEventListener( "timeupdate", handleProgress) = ` $%` Ĭonst scrubTime = (e.offsetX / progress.offsetWidth) * video.duration ToggleButton.innerHTML = video.paused ? "►" : "❚ ❚" Ĭonst progressPercentage = (video.currentTime / video.duration) * 100 To make the progress bar both interactive, Update your script.js file to look like this: const video = document.querySelector( ".video") Ĭonst progress = document.querySelector( ".progress") Ĭonst progressBar = document.querySelector( ".progress_filled") To add a progress bar that updates the video when played, update your index.html file with the following: Video Player Next, we added a play and pause event listener to the video element that calls the updateToggleButton function, which updates based on the video’s state.Īfter that, you should be able to pause and play the video by clicking on the button or the video itself. The togglePlay function executes a condition that toggles playing or pausing the video based on its current state. We then selected the button element and added an event listener to it that triggers the togglePlay function when clicked. We started by selecting the video element, which gives access to the video attributes and methods. Video.addEventListener( "pause", updateToggleButton) Video.addEventListener( "play", updateToggleButton) Video.addEventListener( "click", togglePlay) ToggleButton.addEventListener( "click", togglePlay) ToggleButton.innerHTML = video.paused ? "►" : "❚❚" const video = document.querySelector( ".video") Ĭonst toggleButton = document.querySelector( ".toggleButton") ► Code language: HTML, XML ( xml )Īdd the following to your script.js file with the following to add some interactivity. To add the pause and play functionality to our player, let’s update our index.html file with the following: //. If you preview the page in your browser, you should see the embedded video player as seen below: Populate your style.css file with styles from this CodeSandbox link. Click here to find out more about other attributes.īefore we continue, let’s add some styles to give our app a decent look. The video tag also accepts several optional native attributes, such as controls, which display the standard player controls interface when specified or set to true. In addition, we specified pre-defined content to be displayed for user agents that do not support the video element. The HTML5 specification currently supports three video formats, but we used multiple tags to make two formats of the same video available in MP4 and WebM. You can either add a video from your local computer to the src attribute or go with the default Cloudinary link used in the code. In the code above, we rendered the video> element. To embed a video player into our application, let’s add the following to our index.html file: Custom HTML5 Video Player Video Player Your browser doesn't support HTML5 video. mkdir custom-video-player cd custom-video-player touch index. This video player should work well across all “Grade A” modern browsers.Run the following command to create three files, index.html, style.css, and script.js, in a folder called custom-video-player. So yep, feel free to challenge yourself if you really need “multiple instances”. A “single player with multiple different playlists” makes more sense.How are you going to squeeze multiple players onto small screens? Good design idea?.Or track all the instances, and allow only one to play at a time? Isn’t this as good as a single instance?.Is playing multiple videos on the same page a good idea for mobile devices and slow connections?.So what happens when an instance is already playing? Pause that instance when the user clicks on another one?.Isn’t a single playlist easier to manage than multiple playlists?.Do you really need multiple playlist players on a single page?.Not impossible, but there are several design and technical issues. Video.js window.addEventListener("DOMContentLoaded", () => For the video playlist, we will use Javascript to generate it.Volume slider bar, this is a value from 0.0 (mute) to 1.0 (loudest).Time seek slider bar, this is in seconds.There are 6 components for this custom video player.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |