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. Run the following command to create three files, index.html, style.css, and script.js, in a folder called custom-video-player.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |