video视频播放

最新推荐文章于 2024-03-24 10:00:00 发布

原创最新推荐文章于 2024-03-24 10:00:00 发布 · 1.4w 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html #react

收录于

这篇博客介绍如何在HTML页面中结合JavaScript和React，实现在点击播放按钮后视频开始播放，播放过程中隐藏按钮，视频结束后恢复显示按钮的功能。

点击中间播放按钮，视频开始播放，视频播放的时候中间按钮隐藏，播放完毕按钮出现

<div className='video'>
   <video id='video' style={{ height: 'auto', width: '100%' }} controls={play === true ? 'controls' : ''}>
   		<source src='https://' type='video/mp4'></source>
   </video>
   <div id='play-button' onClick={playVideo}></div>
</div>

const playVideo = () => {
        var video = document.getElementById('video')
        document.getElementById("play-button").style.display = "none"
        video.play()
        setPlay(true)

		// 视频播放完毕
        video.onended = () => {
            setPlay(false)
            document.getElementById("play-button").style.display = "block"
        }
    }