在HTML中,我们可以使用标签嵌入视频文件,但如何对视频进行样式和控制呢?这时我们就需要使用CSS来实现。首先,我们需要在HTML中使用HTML5的video标签来嵌入视频文件,如下所示:html &
html <video src="myVideo.mp4"></video>
css video { width: 600px; height: 400px; }
css video::-webkit-media-controls { display: none; } video::-webkit-media-controls-enclosure { display: none; } video::-webkit-media-controls-start-playback-button { display: none; }
javascript var video = document.querySelector('video'); var playBtn = document.querySelector('#playBtn'); playBtn.addEventListener('click', function() { if (video.paused) { video.play(); playBtn.innerHTML = "暂停"; } else { video.pause(); playBtn.innerHTML = "播放"; } });
css #playBtn { display: inline-block; padding: 8px 20px; background: #333; color: #fff; border: none; cursor: pointer; } #playBtn:hover { background: #555; }
粉丝
0
关注
0
收藏
0