video> Play video Pause video .a-button { background-color: #ffffff; border-radius: 100%; cursor: pointer; position: relative; transition: box-shadow 0.3s cubic-bezier(0.5, 0.61, 0.355, 1), opacity 0.3s cubic-bezier(0.5, 0.61, 0.355, 1); } .a-button:focus { box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5); outline: none; } .a-button:hover { opacity: 0.75; } .a-button__icon { padding: 0.625rem; } .a-icon { fill: #000000; height: 2.1875rem; vertical-align: top; width: 2.1875rem; } background-color: #ffffff; border-radius: 100%; cursor: pointer; position: relative; transition: box-shadow 0.3s cubic-bezier(0.5, 0.61, 0.355, 1), opacity 0.3s cubic-bezier(0.5, 0.61, 0.355, 1); } .a-button:focus { box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5); outline: none; } .a-button:hover { opacity: 0.75; } .a-button__icon { padding: 0.625rem; } .a-icon { fill: #000000; height: 2.1875rem; vertical-align: top; width: 2.1875rem; } @media screen and (min-width: 32em) { .a-icon { height: 2.5rem; width: 2.5rem; } } .m-video { background-color: #000000; position: relative; } .m-video__video { display: block; width: 100%; } .m-video__button { bottom: 0.9375rem; left: 0.9375rem; position: absolute; z-index: 20; } .m-video__button[aria-pressed="true"] { display: none; } .m-video__button[aria-pressed="true"] { display: none; } /* Check if the users browser supports these features */ /*const enhance = ‚querySelector' in document && ‚addEventListener' in window && ‚classList' in document.documentElement;*/ /* If the users browser browser supports the features we need, remove the no-enhance class from the html element and execute our video JS */ /*if(enhance) { document.documentElement.classList.remove('no-enhance');*/ /* Find all video molecules and instantiate a new instance of the Video class */ const videos = document.querySelectorAll(‚.js-video'); Array.from(videos).forEach((video) => { const videoEl = new Video(video); }); } class Video { constructor(video) { this.videoContainer = video; this.video = this.videoContainer.querySelector(‚.js-video-video'); this.playButton = this.videoContainer.querySelector(‚.js-video-play-button'); this.pauseButton = this.videoContainer.querySelector(‚.js-video-pause-button'); this.prefersReducedMotion(); this.addEventListeners(); } prefersReducedMotion() { /* If the users browser supports reduced motion and the user has set it to true, remove the autoplay attribute from the video and pause it */ if(matchMedia(‚(prefers-reduced-motion)').matches) { this.video.removeAttribute(‚autoplay'); this.pauseVideo(); } } addEventListeners() { this.playButton.addEventListener(‚click', () => { this.playVideo(); /* Focus the pause button so keyboard users can immediately pause the video without having to tab away and back again */ this.pauseButton.focus(); }); this.pauseButton.addEventListener(‚click', () => { this.pauseVideo(); /* Focus the play button so keyboard users can immediately play the video without having to tab away and back again */ this.playButton.focus(); }); } playVideo() { this.video.play(); /* Set the play button as pressed so it's hidden and the pause button is displayed instead */ this.playButton.setAttribute(‚aria-pressed', ‚true'); this.pauseButton.setAttribute(‚aria-pressed', ‚false'); } pauseVideo() { this.video.pause(); /* Set the pause button as pressed so it’s hidden and the play button is displayed instead */ this.playButton.setAttribute(‚aria-pressed', ‚false'); this.pauseButton.setAttribute(‚aria-pressed', ‚true'); } } Zurück Weiter
