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

Question

视频格式MP4或FLV

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

需求：

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

烦请各位给一个思路

巴扎黑 · Answer

Give each video a non-displayed tag with its preload attribute set to metadata. This way it won't load the entire video but you will get the length of each video.

In this case, by listening to the durationchange events of those tags, you will know the total time.

Then it is nothing more than making a scroll bar that can be dragged; after dragging it to a certain part, calculate that it is in the middle of that video; display the corresponding to that video, and set the currentTime to Corresponding time, then play().

Update the position of the progress bar by listening to the timeupdate event during playback. By listening to the ended event, you can learn that a video has finished playing and the next one should be loaded.

PHP中文网 · Answer

You can use jPlayer, jPlayer does a good job of encapsulating the

The HTML code block for customizing the player is at the end.
You'd better google jPlayer first and look at the sample code on its website. It will be easier to understand the code I posted.

    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

The simpler method is to rewrite the progress bar and other control buttons yourself.

The page js sets the total duration of each segment, monitors the playback progress, and dynamically changes the src address after the end.
Drag: Drag the progress bar to calculate which section and seconds should be played. Dynamically change the src address and add the parameter ?start=start seconds. Server support is required - -#nginx just enable the flv and mp4 modules.

大家讲道理 · Answer

Have you solved this problem?

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

reply all(4)I'll reply