阿里云视频播放器(带websocket弹幕) - 前端h5

阿里云文档地址: 集成文档 - 视频点播 - 阿里云https://help.aliyun.com/document_detail/125570.html

 实现弹幕思想:

获取视频当前播放时间 , 发送给后端 , 使用定时器+ws获取视频一分钟内所有弹幕,每秒钟获取当前视频时间 , 视频时间等于弹幕的发送时间滚动出来, 当暂停视频时清除所有定时器,点击播放时如果开启弹幕再重复之前获取的操作

  
   
   
   
   
   
   
   
   
   
   
   
  
  
  

	
  
    

  
  
	
 

  

    

    

    

      

        

          {{template "header.html" .}} 
        
      
      

        

          

            

              

                
                  

                    
                  
         
         

          

    


	

            
    

        
        
        

        
        
        
弹幕样式
观看设置
屏蔽设置
 发送
           
          
         
         

         

          

           
收藏
           
手机看
           
分享
           
举报
            

             

             

              

               举报视频：
               {{ .episodes.Title }}
              
             
             

             

              

               
违法违规
               
暴恐
               
血腥暴力
               
色情低俗
               
垃圾信息
               
未成年人有害
               

                

                 问题描述(必填):
                

              
             
             举报
            
          
         
        
        

         

          

           

            

             火影忍者
             
            
            

             720集全
            
           
          
          

           

           

            

             

              选集
             
             

              

               1-30
               31-60
               61-90
               
              
              
             
            
            

             

      {{range $ind, $elem := .episodesList}}
              

               

               
        {{if eq $elem.Id $.episodes.Id }}
                

                 
                
        {{else}}
        {{$elem.Num}}
        {{end}}
        
              
      {{end}}
      
              
             

              
              
              
               

                扫一扫，手机继续看
               
               

                优酷App扫码接着看
               
             
            
            
          
         
        
       
      
      

       

        

         

          
独播
           

            {{ .videoInfo.Title }}：
            {{ .episodes.Title }}
           
          

           热度 {{ .episodes.Comment }}
           

            ·9
            .
            9
           
           

            

             
内容简介
             
            
            格斗
            忍者
            热血
           
          
         
        
       
      
     
    
    

    
  
  
  

   

    

     

      
       

        
        国漫推荐 
       
      
       

        
        日漫推荐 
       
      
       

        
        少女推荐 
       
      
       

        
        评论 
       
     
    
    

     
     

      

       国漫推荐
      
      

       

        

       
       

        

         {{range $ind, $elem := .chinaVideos}}
      {{if lt $ind 6}}
    

          

           
           
           

            {{if ne $elem.IsEnd 1 }}更新至{{$elem.EpisodesCount}}话{{else}}{{$elem.EpisodesCount}}话全{{end}}
           
          
          

           

            {{$elem.Title}}
           
           

            {{$elem.SubTitle}}
           
          
         
      {{end}}
    {{end}} 
        
       
       
      
     
     

      

       日漫推荐
      
      

       

        

       
       

        

         
      {{range $ind, $elem := .japanVideos}}
      {{if lt $ind 6}}
    

          

           
           
           

            {{if ne $elem.IsEnd 1 }}更新至{{$elem.EpisodesCount}}话{{else}}{{$elem.EpisodesCount}}话全{{end}}
           
          
          

           

            {{$elem.Title}}
           
           

            {{$elem.SubTitle}}
           
          
         
      {{end}}
    {{end}} 
    
        
       
       

        

       
      
     
   

      

       少女推荐
      
      

       

    {{range $ind, $elem := .girlVideos}}
    {{if lt $ind 5}}
        

         

          
           

          
          

           {{if ne $elem.IsEnd 1 }}更新至{{$elem.EpisodesCount}}话{{else}}{{$elem.EpisodesCount}}话全{{end}}
          
         
         

          

           {{$elem.Title}}
          
          

           {{$elem.SubTitle}}
          
         
        
    {{end}}
        {{end}}
    

       
      
     
     
  
  

      
评论
      

       

        登录
        
       
       

        
        
        
         
发表评论
       
      
      

       

        

         

          

           热门评论(0)
          
    
          
    

       
          
          

           
查看更多评论
          
         
        
       
      
     
    
   
  
 
  
  
  {{template "foot.html" .}}