视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[AS3]HTML5播放器连续播放分段视频连播

时间:2015-07-11 22:01酷播
[AS3]HTML5播放器连续播放分段视频连播

最近由于工作需要在研究HTML5的播放器，HTML5其实自带的已经很全了，但是当我们需要把切割的视频整合播放的时候就遇到了麻烦，这里我想到了一个思路，正好发现网上也提到了很多这种思路：

首先多播放器窗口，除了一个以外display:none，一般需求中两个就足够了。然后监听是否结束（关于监听，稍后再发一篇讲讲Javascript的监听问题），监听本P播放结束之后将下一个的链接赋值到隐藏的那个，交替display，进度条当然需要重做，这里就需要统计总时长了。


当然理论上很好想，实际在用的时候还是遇到了一些问题：
最近由于工作需要在研究HTML5的播放器，HTML5其实自带的已经很全了，但是当我们需要把切割的视频整合播放的时候就遇到了麻烦，这里我想到了一个思路，正好发现网上也提到了很多这种思路：

首先多播放器窗口，除了一个以外display:none，一般需求中两个就足够了。然后监听是否结束（关于监听，稍后再发一篇讲讲Javascript的监听问题），监听本P播放结束之后将下一个的链接赋值到隐藏的那个，交替display，进度条当然需要重做，这里就需要统计总时长了。


当然理论上很好想，实际在用的时候还是遇到了一些问题：

首先我们来看一下，在加载过程中，依次会发生什么：
当音频/视频处于加载过程中时，会依次发生以下事件：

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

并且这些步骤全部都不是瞬时发生的，试网速而定，正因为如此所以当时我测试替换URL-获取时间-替换URL时才因此失败了。结果得到了一串 NULL，正确的做法是需要监听并执行以上操作。

如果你需要提前缓冲，需要监听timeupdate并且返回值，然后与总时长相减，根据条件判断并加载就行了^ ^

此外的一些，自取函数，之所以打上jQuery标签，是因为懒……：
url使用飞驴获取，时效性很短需要测试请替换数组内容

  1. var videos = new Array('视频1', '视频2', '视频3'); 
  2.         var timeline = new Array(0);    // 记录各点时间 
  3.         var nowVideoLocation = 0;   // 目前所在的位置 
  4.         var playerNum = 0; // 目前使用的video标签位置 
  5.         var str;        // 输出信息 
  6.         var totalTime = 0;      // 视频总时长 
  7.         var currentVideoTime = 0; 
  8.         var i = 0;  // 初始化计数器 
  9.         var targetTime = 0; // 目标时间 
  10.         var targetPlayer = 0;   // 记录目标播放器 
  11.         var loadNextSource = false; // 是否已经将下一个url写入src 
  12.         $('document').ready(function() { 
  13. initTimeline();     // 运行初始化函数 
  14.         // $('.video:eq(' + playerNum + ')').attr('src', videos[i]); 
  15.         /*          setInterval(function(){ 
  16. str = $('#video-meta').html(); 
  17. $('#video-meta').html(str + '目前时间') 
  18.         }, 100) 
  19.         */ 
  20. /*          $('.video')[playerNum].addEventListener(''); 
  21. */ 
  22. $('#btn-play').click(function() { 
  23.     if ($('.video')[playerNum].paused) 
  24.         $('.video')[playerNum].play(); 
  25.     else 
  26.         $('.video')[playerNum].pause(); 
  27. }); 
  28. $('#set-time').click(function() { 
  29.     setToTime($('#time').val()); 
  30. }) 
  31.         }); 
  32. function initHandler() { 
  33.     timeline[i] = $('.video') [1].duration; 
  34.     totalTime += timeline[i]; 
  35.     if (i < videos.length - 1) { 
  36.         $('.video')[1].src = videos[++i] 
  37.     } else { 
  38.         $('.video')[1].src = ''; 
  39.         $('.video')[1].removeEventListener('loadedmetadata', initHandler, true); 
  40.     } 
  41. } 
  42. function currentTimeHandler() { 
  43.     currentVideoTime = $('.video')[playerNum].currentTime; 
  44.     if (timeline[nowVideoLocation] - currentVideoTime < 20 && !loadNextSource) { 
  45.         loadNextVideo(nowVideoLocation + 1); 
  46.         loadNextSource = true; 
  47.     } 
  48.     console.log(currentVideoTime);      // 定期返回监控时间 
  49. } 
  50. function initTimeline () { 
  51.     $('.video')[1].preload = 'auto'; 
  52.     $('.video')[1].src = videos[i]; 
  53.     $('.video')[0].src = videos[i]; 
  54.     $('.video')[1].addEventListener('loadedmetadata', initHandler, true); 
  55.     $('.video')[0].addEventListener('timeupdate', currentTimeHandler, true); 
  56.     $('.video')[0].addEventListener('ended', switchNextVideo, true); 
  57. } 
  58. function loadNextVideo(nextLocation) { 
  59.     var nextPlayer = Number(!playerNum); 
  60.     if (nextLocation < videos.length) { 
  61.         $('.video')[nextPlayer].preload = 'auto'; 
  62.         $('.video')[nextPlayer].src = videos[nextLocation]; 
  63.     } 
  64. } 
  65. function setToTime(time) { 
  66.     var videoChapter; 
  67.     var nextPlayer = Number(!playerNum); 
  68.     if (time >= totalTime) { 
  69.         videoChapter = videos.length - 1; 
  70.         time = totalTime; 
  71.     } else { 
  72.         for (videoChapter = 0; videoChapter < videos.length - 1; videoChapter++) { 
  73. if (time - timeline[videoChapter] < 0) { 
  74.     break; 
  75. } else { 
  76.     console.log('videoTime:' + time); 
  77.     time -= timeline[videoChapter]; 
  78. } 
  79.         } 
  80.     } 
  81.     console.log('videoChapter: '+videoChapter); 
  82.     if (videoChapter == nowVideoLocation) { 
  83.         $('.video')[playerNum].currentTime = time; 
  84.     } else { 
  85.         loadNextVideo(videoChapter); 
  86.         console.log(time); 
  87.         targetTime = time; 
  88.         /*$('.video')[nextPlayer].currentTime = time;*/ 
  89.         targetPlayer = nextPlayer; 
  90.         $('.video')[targetPlayer].addEventListener('durationchange', jumpToTime, true); 
  91.         switchToVideo(); 
  92.         nowVideoLocation = videoChapter; 
  93.         console.log('nowVideoLocation: '+nowVideoLocation); 
  94.     } 
  95. } 
  96. function jumpToTime() { 
  97.     $('.video')[targetPlayer].currentTime = targetTime; 
  98.     console.log('hello'); 
  99.     $('.video')[targetPlayer].removeEventListener('durationchange', jumpToTime, true); 
  100. } 
  101. function switchNextVideo() { 
  102.     var nextPlayer = Number(!playerNum); 
  103.     loadNextSource = false; 
  104.     console.log('SwitchNow!'); 
  105.     if (nowVideoLocation < videos.length - 1) { 
  106.         $('.video:eq(' + nextPlayer + ')').css('display', ''); 
  107.         $('.video:eq(' + playerNum + ')').css('display', 'none'); 
  108.         $('.video')[playerNum].pause(); 
  109.         $('.video')[playerNum].removeEventListener('timeupdate', currentTimeHandler, true); 
  110.         $('.video')[playerNum].removeEventListener('ended', switchNextVideo, true); 
  111.         $('.video')[playerNum].src = ''; 
  112.         $('.video')[nextPlayer].addEventListener('timeupdate', currentTimeHandler, true); 
  113.         $('.video')[nextPlayer].addEventListener('ended', switchNextVideo, true); 
  114.         $('.video')[nextPlayer].play(); 
  115.         nowVideoLocation++; 
  116.         playerNum = nextPlayer; 
  117.     } else { 
  118.         $('.video')[playerNum].removeEventListener('ended', switchNextVideo, true); 
  119.     } 
  120. } 
  121. function switchToVideo() { 
  122.     var nextPlayer = Number(!playerNum); 
  123.     console.log('SwitchNow!'); 
  124.     loadNextSource = false; 
  125.     $('.video:eq(' + nextPlayer + ')').css('display', ''); 
  126.     $('.video:eq(' + playerNum + ')').css('display', 'none'); 
  127.     $('.video')[playerNum].pause(); 
  128.     $('.video')[playerNum].removeEventListener('timeupdate', currentTimeHandler, true); 
  129.     $('.video')[playerNum].removeEventListener('ended', switchToVideo, true); 
  130.     $('.video')[playerNum].src = ''; 
  131.     $('.video')[nextPlayer].addEventListener('timeupdate', currentTimeHandler, true); 
  132.     $('.video')[nextPlayer].addEventListener('ended', switchToVideo, true); 
  133.     $('.video')[nextPlayer].play(); 
  134. } 


后记：后来在这里看到类似思路，加载点略不同，测试了一下似乎在提前在网速不佳的情况下表现效果会so bad，还是这样就好了，进度条需要诸君利用setToTime函数自行重写，请自便

ps:可 以使用jPlayer，jPlayer对HTML5中的<audio>和<video>标签做了很好的封装。在浏览器支持 HTML5的情况下用HTML5标签，在浏览器不支持HTML5的情况下用flash代替。更重要的是jPlayer提供对播放器界面的完全定制，保证无 论是在何种浏览器下播放器外观都能够一致。由于可以定制播放器界面，你提出来的要求便可以满足。
下面是我自己一个项目的代码片段，我精简了一下。你找一下timeupdate: function(event) {这一行代码，里面有更新进度条的代码

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器