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

请问楼主这个问题解决了没啊？

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

全部回复(4)我来回复