it-swarm.com.de

War jemand in der Lage, den Medieninhalt einer Website von Flash auf HTML5 zu konvertieren?

Ich möchte eine Website von Flash-basierten Videos nach HTML5 konvertieren. Das aktuelle Video verwendet Zeitmarken, um Folien anzuzeigen (ähnlich wie bei YouTube, wenn Anzeigen auf den Videos geschaltet werden). Der Unterschied zwischen Youtube und meiner Website besteht jedoch darin, dass sie nicht im Video angezeigt wird. Die Folien werden neben dem Video angezeigt.

Gibt es eine Möglichkeit, dies mit HTML5 zu erreichen? Oder muss ich dafür Javascript verwenden?

Wenn dies nicht klar genug ist, lassen Sie es mich bitte wissen.

1
Muhammad Usman

Sie benötigen JavaScript.

Die gute Nachricht ist, dass es ziemlich einfach ist. Verwenden Sie einfach den Videoplayer jPlayer für die Videowiedergabe und binden Sie dann das Ereignis $.jPlayer.event.timeupdate, um Ihre Diashow voranzutreiben:

LIVE DEMO HIER

<!doctype html>
<html>
<head>
<title>Demo : jPlayer as a slide player</title>

<link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

<style>
#slideshow{ float:left; margin-left:10px;}
.jp-video{ float:left;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

    $("#jp").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
                poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
            });
        },
        ended: function (event) {
            $(this).jPlayer("play");
        },
        swfPath: "js",
        supplied: "m4v, ogv"
    });

    $("#jp").bind($.jPlayer.event.timeupdate, function(event) { 
        var currentTime = Math.floor(event.jPlayer.status.currentTime)

        if (currentTime < 3){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/slide1.png'/>");  
        }

        if (currentTime >= 3 && currentTime < 12){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/slide2.png'/>");  
        }

        if (currentTime >= 12 && currentTime < 16){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/slide3.png'/>");  
        }

        if (currentTime >= 16 && currentTime < 22){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/slide4.png'/>");  
        }

        if (currentTime >= 22 && currentTime < 30){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/slide5.png'/>");  
        }


        if (currentTime >= 30){
            $("#slideshow").html("<img src='http://yoursite.com.com/wm/jplayer/slides/fin.png'/>"); 
        }



    });


});
//]]>
</script>
</head>
<body>
        <div class="jp-video jp-video-360p">
            <div class="jp-type-single">
                <div id="jp" class="jp-jplayer"></div>
                <div id="jp_interface_1" class="jp-interface">
                    <div class="jp-video-play"></div>
                    <ul class="jp-controls">
                        <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                        <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                        <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                        <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
                    </ul>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                </div>
                <div id="jp_playlist_1" class="jp-playlist">
                    <ul>
                        <li>Big Buck Bunny Trailer</li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="slideshow">
        <img src='http://yoursite.com.com/wm/jplayer/slides/slide1.png'/>
        </div>

</body>
</html>
1
Nick

Ja, Sie benötigen JavaScript, um die von Ihnen beschriebene Folienfunktion zu implementieren. HTML5 ist nur Markup. Sie können ein Video damit in eine Seite einbetten - aber um etwas Besonderes daraus zu machen, müssen Sie die übliche Kombination aus CSS und JavaScript verwenden.

0
Steve