零基础建站培训教程介绍

当前位置:

分享一个html5视频播放器代码

在自己做网站时,有时需要在自己的网站上插入一些视频。特别是像学做网站论坛这样的视频教程网站,每个页面都需要插入一个视频教程。这时我们就需要使用html5视频播放器代码。(相关教程:如何在网站中嵌入视频播放器

如何在自己建网站时插入视频呢?方法很简单,只需要使用以下的html5视频播放器代码,把它放到自己的网站模板里,然后修改代码里的视频地址即可。


<video id="vipsp" controls>
                              <source src="sp.mp4" type="video/mp4">
                              <embed src="sp.mp4" width="100%" height="480" autostart=false >                          
                            </video>

如果需要自动播放,可以使用以下的html5视频播放器代码:


<video id="vipsp" controls autoplay>
                              <source src="sp.mp4" type="video/mp4">
                              <embed src="sp.mp4" width="100%" height="480" autostart=false >                          
                            </video>

如果想实现用户点击视频窗口任一位置都可以暂停/播放,可以在html5视频播放器代码下面加上以下的JS控制代码:


  <script type="text/javascript">
                        var video = document.getElementById("vipsp");
                        this.controls = true; //控制条
                        var current = true  
                        video.addEventListener("click",function() {      
                              if(current){
                                video.play()
                                current = false  //下次点击的状态
                              }else{
                                video.pause()
                                current = true
                              }
                        })
                        </script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

学做网站论坛零基础学建网站课程