• JS特效 http://www.xslszxw.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的人都可以使用的代码集合篇,我们的代码应该是不会有什么差错但要是实在不能将视频剪辑的代码运行操作那么可能是我的失误请多谅解。
    • 专题推荐

    次元立方 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
    本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规
    彩票联盟网站 北川| 即墨市|