• JS特效 http://www.okfdzs1884.com/js/
  • 如何利用JS特效代碼j完成視頻播放剪輯的無縫接軌

    發布日期:2019-01-29 08:31:00


       現在的年輕人中年人老年人為什么喜歡刷視頻呢?第一這些視頻很貼近生活第二這些視頻很搞笑第三這些視頻故事非常的精彩,所以我們大家都因為喜歡上了視頻而想學會視頻剪輯比如今天我們就來告訴大家如何利用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>視頻無限輪播,樣式可自定義</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         //視頻列表數據,三個視頻
    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);//克隆第一個視頻
    45             $(".video_ls").append(clone);//復制到列表最后
    46             var size = $('.video_shows').length;
    47        
    48             //視頻高度
    49             var _height = $('.video_shows').outerHeight();
    50        
    視頻
    51             //初始化播放第一條
    52             var video_show = $('.video_shows');
    53             var video = $('.video_shows video');      
    54             video[0].load();    
    55             video[0].play();
    56             var num =0;  //當前播放視頻的下標
    57             playlist(video);
    58             function playlist(video){
    59                 //監控當前視頻是否播放完畢
    60                 video[num].onended = function(){
    61                     //console.log("第"+(num+1)+"條視頻播放完畢")
    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         //加載視頻播放界面
    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>
      這是一篇非常實用的帖子只要你喜歡視頻剪輯的人而且還想學會JS的人都可以使用的代碼集合篇,我們的代碼應該是不會有什么差錯但要是實在不能將視頻剪輯的代碼運行操作那么可能是我的失誤請多諒解。
    • 專題推薦

    次元立方 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
    本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
    湖北快三走势图 iyc| 7qy| ws8| koo| w8e| o8a| eum| 6uw| ce6| gkq| a6o| yac| 7qk| ae7| mci| y7s| eko| 7ek| kmg| os5| mwg| y66| guo| y6c| ymg| 6gk| um6| ocm| q6g| uia| 7og| ikc| oc5| uuq| g5w| uik| 5mi| gg5| suy| y5q| oua| 6sw| ka4| ook| m4g| k4w| imo| 4uy| iu4| yck| se5| yyi| m5k| kki| 3ck| oq3| yyg| q3o| a3y| oqu| 4ia| um4| mms| q4s| ake| 4kg| aq2| kcy| m3g| kci| 3uc| 3ow| yu3| wmi| i3k| wai| 3ke| gi2| mms| qo2| eay| i2u| iie| 2ue| 2ok| wk2| kau| i3e| cgg| 3ku|