• JS特效 http://www.it165.net/js/
  • 乐彩网官网

    發布日期︰2020-02-20 04:13:00


       現在的年輕人(ren)中(zhong)年人(ren)老年人(ren)為什麼(me)喜歡刷視頻呢?第一這些視頻很貼近生活(huo)第二這些視頻很搞笑第三這些視頻故事非常的精彩(cai),所(suo)以我們大家都因為喜歡上(shang)了視頻而想(xiang)學(xue)會(hui)視頻剪輯比如今天(tian)我們就來告(gao)訴大家如何利(li)用JS來剪輯視頻。
     1 hi
     2 <!DOCTYPE html>
     3 <html lang="zh">
     4 <head>
     5     <meta charset="UTF-8" />
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     7     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     8     <title>視頻無限輪播(bo),樣式可自(zi)定義</title>
     9     <style type="text/css">
    10         *{
    11             margin: 0;
    12             padding: 0;
    13         }
    14     </style>
    15 </head>
    16 <body>
    17     <div class="wrap">
    18         <div class="video_list">
    19             <div class="video_ls"></div>
    20         </div>
    21     </div>
    22    
    23    
    24     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    25     <script type="text/javascript">
    26         var cdnUrl = '';  //資源url
    27        
    28         //視頻列表數據,三個(ge)視頻
    29         var videoList = [
    30             {resid:'video/1.mp4'},
    31             {resid:'video/2.mp4'},
    32             {resid:'video/3.mp4'}             
    33         ]; 
    34         var leg = videoList.length;
    35        
    36         $(document).ready(function(){
    37             //加載視頻列表
    38             var str='';
    39             for(var i=0;i<leg;i++){
    40                 loadvideo(videoList[i],i); 
    41             }
    42        
    43             //實現無縫滾動
    44             var clone = $(".video_ls .video_shows").first().clone(true);//克隆第一個(ge)視頻
    45             $(".video_ls").append(clone);//復(fu)制到列表最後
    46             var size = $('.video_shows').length;
    47        
    48             //視頻高度
    49             var _height = $('.video_shows').outerHeight();
    50        
    視頻
    51             //初始(shi)化播(bo)放第一條
    52             var video_show = $('.video_shows');
    53             var video = $('.video_shows video');      
    54             video[0].load();    
    55             video[0].play();
    56             var num =0;  //當前播(bo)放視頻的下標
    57             playlist(video);
    58             function playlist(video){
    59                 //監(jian)控當前視頻是否(fu)播(bo)放完畢
    60                 video[num].onended = function(){
    61                     //console.log("第"+(num+1)+"條視頻播(bo)放完畢")
    62                     num++;             
    63                     if(num<video.length){
    64                         var _top = -_height*(num)+'px';
    65                         $('.video_ls').animate({'top':_top},'1500')                           
    66                     }else{
    67                         num=1;
    68                         $(".video_ls").css('top','0');
    69                         $('.video_ls').animate({'top':-_height},'1500')                           
    70                     }
    71                     video[num].load();    
    72                     video[num].play();
    73                     return playlist(video);
    74                 }              
    75             }          
    76         })
    77         //加載視頻播(bo)放界面
    78         function loadvideo(videodta,i){
    79                str = '';
    80                str += '<div class="video_shows">';
    81                str += '<video id="myvideo'+(i+1)+'" class="video-js vjs-big-play-centered"  preload="auto">';
    82                str += '<source src="'+cdnUrl+videodta.resid+'" type="video/mp4">';
    83                str += '</video>';
    84                str += '</div>';
    85                $(".video_ls").append(str);
    86         }
    87     </script>
    88 </body>
    89 </html>
      這是一篇非常實用的帖子只要你喜歡視頻剪輯的人(ren)而且還想(xiang)學(xue)會(hui)JS的人(ren)都可以使用的代(dai)碼集(ji)合(he)篇,我們的代(dai)碼應該是不會(hui)有什麼(me)差錯但要是實在不能(neng)將視頻剪輯的代(dai)碼運行操作(zuo)那麼(me)可能(neng)是我的失誤請(qing)多諒解。
    • 乐彩网官网

    次(ci)元立方 -廣告(gao)服務(wu) -隱私聲明(ming) -版權申明(ming) -免責條款 -網站(zhan)地圖 -網友(you)投稿 -聯系方式
    本(ben)站(zhan)內容來自(zi)于互聯網,僅供用于網絡(luo)技(ji)術學(xue)習,學(xue)習中(zhong)請(qing)遵循相(xiang)關法(fa)律(lv)法(fa)規
    乐彩网官网 | 下一页