使用VideoPlayer连续播放两个视频,中间没有“黑框”

时间:2011-02-10 09:21:40

标签: flex

我正在播放多个短视频片段,我希望它看起来像是一个连续的视频。有没有办法将它们组合在一起,以便在设置新的视频源时不明显。

目前,当我设置新的视频源时,我遇到了插入黑框的问题。事件的顺序似乎是这样的

- >视频结束 - >已完成事件已发送 - >将源设置为新视频 - >屏幕变为空白(这不应该发生,而是应该保留视频的最后一帧,直到加载新视频) - >几毫秒过去了 - >新视频开始播放。

是否可以避免屏幕变为空白或保持最后一帧显示,直到下载视频为止。

谢谢,

丹尼斯

2 个答案:

答案 0 :(得分:0)

从技术上讲,它是可行的,但我怀疑你能100%正确地做到这一点。以下是您需要执行此操作的方法。

在第一个(或上一个)视频完成之前,您必须在新的播放器实例中加载下一个视频。当然,取决于许多因素,在第一次完成之前多久必须加载下一个因素取决于许多因素 1.下一个视频的比特率 2.客户端计算机的Internet带宽。 3.如果在您需要加载下一个视频之前未完全加载上一个视频,则必须考虑到这一点,并且不妨碍播放当前正在播放的视频。 4.有些客户端计算机可能无法在没有卡顿和故障的情况下执行此操作。

解决问题的最佳方法是先将视频拼接在一起。当然,如果你不知道前面的序列你就不能这样做,所以你只能做我之前提到过的事情。

答案 1 :(得分:0)

这是Shiv描述的双视频播放器。这在很大程度上起作用,除了在下一个视频加载时有一个短暂停顿......仍然不理想。

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <fx:Metadata>
        [Event(name="complete", type="org.osmf.events.TimeEvent")]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            import org.osmf.events.MediaPlayerStateChangeEvent;
            import org.osmf.events.TimeEvent;
            import org.osmf.media.MediaPlayer;
            import org.osmf.media.MediaPlayerState;

            import spark.components.VideoPlayer;

            var _source:String = "";
            var activePlayer:VideoDisplay = null;
            var otherPlayer:VideoDisplay = null;
            var playerIndex:int = 0;

            public function set source (value:String) {
                trace('set source: ' + value)
                if(value == '' || value == null || value == _source) {
                    trace('rejected source');
                    return;
                }

                if(activePlayer != null) {
                    activePlayer.depth = 3;
                }
                activePlayer = getElementAt(playerIndex) as VideoDisplay;
                playerIndex = playerIndex == 0?1:0;
                otherPlayer = getElementAt(playerIndex) as VideoDisplay;
                trace('active player: ' + activePlayer.id);
                activePlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, player1_mediaPlayerStateChangeHandler);
                activePlayer.source = value;
                _source = value;

            }
            public function get source ():String {
                return _source;
            }

            protected function player1_mediaPlayerStateChangeHandler(event:MediaPlayerStateChangeEvent):void
            {
                trace('state change: ' + event.state + ', player: ' + (event.currentTarget.id));
                if(event.state == MediaPlayerState.READY) {
                    player1.removeEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE,player1_mediaPlayerStateChangeHandler);
                    player2.removeEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE,player1_mediaPlayerStateChangeHandler);

                    activePlayer.play();
                    activePlayer.depth = 2;
                    otherPlayer.depth = 1;
                }
            }

            protected function completeHandler(event:TimeEvent):void
            {
                if(event.currentTarget == activePlayer) {
                    trace('video complete');
                    dispatchEvent(event);
                }
            }

        ]]>
    </fx:Script>

    <s:VideoDisplay id="player1"  autoRewind="false" complete="completeHandler(event)" autoPlay="true" opaqueBackground="false"/>
    <s:VideoDisplay id="player2"  complete="completeHandler(event)" autoRewind="false" autoPlay="true" opaqueBackground="false" />

</s:Group>