web-dev-qa-db-ja.com

誰かがサイトのメディアコンテンツをフラッシュからhtml5に変換できましたか？

サイトをFlashベースの動画からHTML5に変換したいと考えています。現在の動画はタイムマークを使用してスライドを表示します（YouTubeが動画に広告を表示するようなものです）。ただし、Youtubeと私のサイトの違いは、ビデオ内に表示されず、スライドがビデオの横に表示されることです。

HTML5でこれを達成する方法はありますか？または、これにJavascriptを使用する必要がありますか？

これが十分に明確でない場合、私に知らせてください。

javascripthtml5flash
1
Muhammad Usman

JavaScriptが必要です。

良いニュースは、非常に簡単だということです。ビデオの再生に jPlayer ビデオプレーヤーを使用し、$.jPlayer.event.timeupdateイベントをバインドしてスライドショーを進めるだけです：

LIVE DEMO HERE

<!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

はい、説明したスライド機能を実装するにはJavaScriptが必要です。HTML5は単なるマークアップです。それにページにビデオを埋め込むことができますが、それをもっと凝ったものにするためには、CSSとJavaScriptの通常のコンボを使用する必要があります。

0
Steve