HTML5+JS连续播放分段视频有没有什么方法

Question

视频格式MP4或FLV

大约3段，每段15分钟左右。

需求：

1.显示出来的是总时间（45分钟左右）
2.能够拖动滚动条（自动切到合适的视频段）

烦请各位给一个思路

巴扎黑 · Answer

給每一段視頻一個不顯示的標簽，其 preload 屬性設置為 metadata。這樣的話不會加載整個視頻但是你能獲得每個視頻的長度。

這樣的話通過監聽那幾個標簽的 durationchange 事件，你就知道總時間了。

然後無非就是做一個可以拖動的滾動條；拖動到某個部位之後，算一下處於那段視頻中間；把那段視頻對應的顯示出來，並把 currentTime 設置到相應的時間，然後 play()。

播放時通過監聽 timeupdate 事件來更新進度條的位置。通過監聽 ended 事件來獲知一段視頻已經播放結束，應該加載下一段。

PHP中文网 · Answer

你可以使用jPlayer，jPlayer對HTML5中的

定製播放器的HTML代碼塊在最後麵。
你最好先google一下jPlayer，看看它的網站上的示例代碼，會更容易理解我所貼的代碼。

    function initPlayer(playerId, containerId) {
        var paused = true, count = 0;
        var $audioPlayer = $("#"+playerId),
            audioPlayerData,
            options = {
                preload: "auto",
                ready: function (event) {
                    // Hide the volume slider on mobile browsers. ie., They have no effect.
                    if(event.jPlayer.status.noVolume) {
                        // Add a class and then CSS rules deal with it.
                        $(".jp-gui").addClass("jp-no-volume");
                    }
                },
                timeupdate: function(event) {
                    var beginTime = $(this).data("beginTime"),
                        endTime = $(this).data("endTime"),
                        current = event.jPlayer.status.currentTime,
                        duration = event.jPlayer.status.duration;

                    if(typeof beginTime == "undefined")
                        beginTime = 0;
                    if(typeof endTime == "undefined")
                        endTime = duration;

                    myControl.progress.slider("value", (current - beginTime) * 100.0 / (endTime - beginTime));

                    if(!event.jPlayer.status.paused) {
                        if(current >= endTime) {
                            $(this).jPlayer("stop");

                            if($(this).data("onEnded")) {
                              $(this).data("onEnded")();
                            }
                        }
                        else if(current < beginTime) {
                            $(this).jPlayer("playHead", beginTime / duration * 100);
                        }
                    }
                },
                volumechange: function(event) {
                    if(event.jPlayer.options.muted) {
                        myControl.volume.slider("value", 0);
                    } else {
                        myControl.volume.slider("value", event.jPlayer.options.volume);
                    }
                },
                swfPath: "/js",
                supplied: "mp3",
                cssSelectorAncestor: "#"+containerId,
                wmode: "window",
                play: function(event) {
                    if(paused) {
                        paused = false;
                        $audioPlayer.data("paused", false);
                    }
                },
                pause: function(event) {
                    if(!paused) {
                        paused = true;
                        $audioPlayer.data("paused", true);
                    }
                }
            },
            myControl = {
                progress: $(options.cssSelectorAncestor + " .jp-progress-slider"),
                volume: $(options.cssSelectorAncestor + " .jp-volume-slider")
            };

        // Instance jPlayer
        $audioPlayer.jPlayer(options);

        // A pointer to the jPlayer data object
        audioPlayerData = $audioPlayer.data("jPlayer");

        audioPlayerData._updateInterface = function() {
            if(this.css.jq.currentTime.length) {
                this.css.jq.currentTime.text($.jPlayer.convertTime(this.status.currentTime - this.getBeginTime()));
            }
            if(this.css.jq.duration.length) {
                this.css.jq.duration.text($.jPlayer.convertTime(this.getEndTime() - this.getBeginTime()));
            }
        }

        audioPlayerData.getBeginTime = function() {
            var beginTime = $audioPlayer.data("beginTime");
            if(typeof beginTime == "undefined")
                beginTime = 0;
            return beginTime;
        }

        audioPlayerData.getEndTime = function() {
            var endTime = $audioPlayer.data("endTime");
            if(typeof endTime == "undefined")
                endTime = this.status.duration;
            return endTime;
        }

        audioPlayerData.forceUpdateProgressBar = function () {
            myControl.progress.slider("value", 0);
        }

        // Define hover states of the buttons
        $('li.jp-volume-max,li.jp-mute,li.jp-unmute,li.jp-stop,li.jp-pause,li.jp-play').hover(
            function() { $(this).addClass('ui-state-hover'); },
            function() { $(this).removeClass('ui-state-hover'); }
        );

        // Create the progress slider control
        myControl.progress.slider({
            animate: "fast",
            max: 100,
            range: "min",
            step: 0.1,
            value : 0,
            slide: function(event, ui) {
                var sp = audioPlayerData.status.seekPercent;
                if(sp > 0) {
                    // Move the play-head to the value and factor in the seek percent.
                    var seekPos = (audioPlayerData.getEndTime() - audioPlayerData.getBeginTime()) * ui.value / 100.0 + audioPlayerData.getBeginTime();
                    $audioPlayer.jPlayer("playHead", seekPos / audioPlayerData.status.duration * 100.0);
                } else {
                    // Create a timeout to reset this slider to zero.
                    setTimeout(function() {
                        myControl.progress.slider("value", 0);
                    }, 0);
                }
            }
        });

        // Create the volume slider control
        myControl.volume.slider({
            animate: "fast",
            max: 1,
            range: "min",
            step: 0.01,
            value : $.jPlayer.prototype.options.volume,
            slide: function(event, ui) {
                $audioPlayer.jPlayer("option", "muted", false);
                $audioPlayer.jPlayer("option", "volume", ui.value);
            }
        });
    }
}

      
      
      
          

              

                  
                      play
                  
                  
                      pause
                  stop
                  
                  
                  
                  
                  unmute
                  
                  
              
              
          
          
              Update Required
              To play the media you will need to either update your browser to a recent version or update your Flash plugin.

阿神 · Answer

比較簡單的方法，自己重寫進度條以及其他控製按鈕。

頁麵js設置每段的總時長，監聽播放進度，結束後動態更改src地址。
拖動：拖動進度條，計算應該播放第幾段的第幾秒。動態更改src地址加參數?start=開始秒數。需要服務器支持- -#nginx開啟flv和mp4的module即可。

大家讲道理 · Answer

請問樓主這個問題解決了沒啊？