HTML彈出視頻播放是網頁設計中常用的功能,可以讓網頁更加生動有趣。以下是一段HTML代碼示例,可以實現彈出視頻播放窗口:
<!-- 鏈接添加data屬性,值為視頻網址 --> <a href="#" data-video="http://example.com/myvideo.mp4">點擊播放視頻</a> <!-- 彈出的視頻播放窗口 --> <div id="video-modal"> <video controls preload="metadata"> <source src="#" type="video/mp4"> </video> <button id="close-modal">關閉</button> </div> <script> var videoLink = document.querySelectorAll('a[data-video]'); videoLink.forEach(function(link) { link.addEventListener('click', function(e) { e.preventDefault(); var videoUrl = link.getAttribute('data-video'); var videoModal = document.getElementById('video-modal'); var video = videoModal.querySelector('video'); var closeModal = document.getElementById('close-modal'); video.setAttribute('src', videoUrl); videoModal.classList.add('show'); closeModal.addEventListener('click', function() { videoModal.classList.remove('show'); video.pause(); }); }); }); </script>
以上代碼實現的功能是,當用戶點擊鏈接時,會彈出一個視頻播放窗口,并自動播放鏈接指定的視頻。用戶可以通過窗口中的控制器來暫停、播放、調整音量等。當用戶點擊關閉按鈕時,窗口會關閉并停止視頻的播放。
下一篇html并排輸入框代碼