OETY欧亿|Home

135-2716-3909
网站建设资讯详细

网站建设□□□□之视频播△放

发表日期:2026-06-23 09:09:09   作者来源:OETY欧亿   浏览:4996   标签:网站建设    
 随着时代□□□□的发展,互联网技□□□□术日新月□□□异。几年前,网站的表□□现形式还□□□□只是表格,不同于现□□□在
   各种技术□□的发展,网站的内□□容已经变□□□成了文字、图片、音频、视频等等。一段简短、精致的
   视频可以·很好地展▽现我们公□□□司的实力,让我们的□□□潜在客户□□□□更加的信□□□□任我们。所以,如何有效
   的在网站中插入视频是很好重要的。
 
   首先,我们来认识视频引入标签video,以及引入格式
   <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>
 
   width===播放器在浏览器显示的宽度
   height===播放器在浏览器显示的高度
   controls===视频播放器控件,能控制视频播放、暂停、全屏、声音大小等
 
   引入之后在浏览器的呈现结果如下图所示:
 

网站视频播放

 
   接下来,我们了解□□□□一下视频※的在网站□□的一些应◢用。比如:我们要实□□□□现一个网▲站打开,先播放一□□段视频
   在进入的网站的页面的效果
   <if condition="!session('is_play')">
   <div class="video-popup">      
       <video controls="controls" autoplay="autoplay" id="myvideo" width="100%" height="100%">
         <source src="__IMG__/video/video.MP4" type="video/ogg" />
       </video>       
   </div>
   </if>
   <script type="text/javascript">
       var myvideo=document.getElementById('myvideo');
       setTimeout(function(){
           $(".video-popup").fadeOut();   
           myvideo.pause();
           $.ajax({
               type:'post',
               url:"{:U('Ajax/video')}",
               data:{'is_play':1},
               success:function(){
                  
               }
           }) 
       }, 17000);
   </script>
 
   这个应用▲其实只是□□设置一个□□定时器,时间一到,就隐藏视□□□频播放页□□面。其中的session值是为了
   实现页面•第一次打□□□开播放视□□□频,后面再进□□□入这个页□□□□面不播放□□□视频的效□□□□果。这里还有□□□一个方法□□□□要注意
   就是pause方法,因为你只□□□是隐藏了,但是视频□□□还在播放,所以需要□□暂停视频□□□□播放。
 
   友情提示□□□一下:最好不要丨把视频资✦源,和网站代◢码放在一◇起,因为视频□□□资源一般□□□都比较
   大,这样会导□□□致整个网□□□□站加载比□□较慢,从而造成□□□□网站打开•速度慢,影响用户□□□体验。如果可以,我们可以
   选择把视□□□□频放到阿□□里云oss里面,这样我们□□只需要引□□□□入视频路□□□□径就可以。
 
 
   最后,我们也可以通过<iframe src='{$xinghao_curr.video_url}' width='100%' height='100%' frameborder=0 allowfullscreen></iframe>这个标签,来引入第三方视频
 
如没特殊注明,文章均为OETY欧亿原创,转载请注明来自https://www.hd-banhen.com/news/5054.html