隨著時(shí)代的發(fā)展，互聯(lián)網(wǎng)技術(shù)日新月異。幾年前，網(wǎng)站的表現(xiàn)形式還只是表格，不同于現(xiàn)在
   各種技術(shù)的發(fā)展，網(wǎng)站的內(nèi)容已經(jīng)變成了文字、圖片、音頻、視頻等等。一段簡短、精致的
   視頻可以很好地展現(xiàn)我們公司的實(shí)力，讓我們的潛在客戶更加的信任我們。所以，如何有效
   的在網(wǎng)站中插入視頻是很好重要的。

   首先，我們來認(rèn)識(shí)視頻引入標(biāo)簽video,以及引入格式
   <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持 video 標(biāo)簽。
</video>

   width===播放器在瀏覽器顯示的寬度
   height===播放器在瀏覽器顯示的高度
   controls===視頻播放器控件，能控制視頻播放、暫停、全屏、聲音大小等

   引入之后在瀏覽器的呈現(xiàn)結(jié)果如下圖所示：

   接下來，我們了解一下視頻的在網(wǎng)站的一些應(yīng)用。比如：我們要實(shí)現(xiàn)一個(gè)網(wǎng)站打開，先播放一段視頻
   在進(jìn)入的網(wǎng)站的頁面的效果
   <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>

   這個(gè)應(yīng)用其實(shí)只是設(shè)置一個(gè)定時(shí)器，時(shí)間一到，就隱藏視頻播放頁面。其中的session值是為了
   實(shí)現(xiàn)頁面第一次打開播放視頻，后面再進(jìn)入這個(gè)頁面不播放視頻的效果。這里還有一個(gè)方法要注意
   就是pause方法，因?yàn)槟阒皇请[藏了，但是視頻還在播放，所以需要暫停視頻播放。

   友情提示一下：最好不要把視頻資源，和網(wǎng)站代碼放在一起，因?yàn)橐曨l資源一般都比較
   大，這樣會(huì)導(dǎo)致整個(gè)網(wǎng)站加載比較慢，從而造成網(wǎng)站打開速度慢，影響用戶體驗(yàn)。如果可以，我們可以
   選擇把視頻放到阿里云oss里面，這樣我們只需要引入視頻路徑就可以。

   最后，我們也可以通過<iframe src='{$xinghao_curr.video_url}' width='100%' height='100%' frameborder=0 allowfullscreen></iframe>這個(gè)標(biāo)簽，來引入第三方視頻
 

以上就是關(guān)于網(wǎng)站建設(shè)之視頻播放(視頻網(wǎng)站建設(shè)費(fèi)用明細(xì))，希望對(duì)你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

分享題目：網(wǎng)站建設(shè)之視頻播放(視頻網(wǎng)站建設(shè)費(fèi)用明細(xì))
網(wǎng)頁URL：http://www.rwnh.cn/news13/312863.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、外貿(mào)建站、網(wǎng)站設(shè)計(jì)、云服務(wù)器、品牌網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)