4

HTML5 で曲をアップロードして再生しようとしています。JavaScript を使用してファイルをサーバーにアップロードし、jPlayer を使用して曲を再生していますが、このプラグインで問題が発生しています。

これは私のコードです:

$(document).ready(function() {

        $(this)

        .bind("dragenter", function(event) {
                return false;
            })

        .bind("dragover", function(event) {
                return false;
            })

            .bind("drop", function(event) {
                var file = event.originalEvent.dataTransfer.files[0];
            event.preventDefault();
                $("#state").html("Loading...");
                $.ajax({
                    url: 'upload.php',
                    async: true,
                    type: 'POST',
                    contentType: 'multipart/form-data',
                    processData: false,
                    data: file,
                    success: function(data) {
                        $("#state").html("Ready!");
                $("#player").jPlayer( {
                    ready: function() {
                        $(this).jPlayer("setMedia", {
                            oga: file.name
                        }).jPlayer("play");
                    },
                    supplied: "oga"
                });
                    },
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader("X-File-Name", file.name);
                        xhr.setRequestHeader("Cache-Control", "no-cache");
                    }
            });
            });
    });

ファイルはサーバーにアップロードされますが、jPlayer で再生されず、理由がわかりません...

@vigrond: はい、できます! ;)

<html id = "homepage">

    <head>
        <title>Echo</title>
        <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type = "text/javascript" src = "jquery.jplayer.min.js"></script>
        <script type = "text/javascript" src = "upload.js"></script>
    </head>

    <body bgcolor = "black">
        <div style = "margin: 0 auto; text-align: center">
                <h1 style = "margin-top: 100px; color: white">Drag and drop a song...</h1>
                <h2 id = "state" style = "color: white"></h2>
        </div>
        <div id = "player"></div>
    </body>

</html>
4

1 に答える 1

0

理解しておくべき主な問題は、HTML5 オーディオのサポートに関しては、すべてのブラウザーが異なる動作をすることです。(こちらをご覧ください: http://www.w3schools.com/html5/html5_audio.asp )

そのため、jPlayer にはフラッシュ バックアップ ソリューションがあります。

デフォルトでは、jPlayer は最初に html5 ソリューションを試行し、次のデフォルト設定でフラッシュにフォールバックします。

solution: "html,flash"  //Set by default, no declaration necessary

フラッシュ サポートを機能させるには、swfPath を、jPlayer に付属の Jplayer.swf ファイルを含むディレクトリに設定 する必要があります。

swfPath: "/js"

さらに、jPlayer では、HTML5 のサポートを最大化するために、同じファイルの少なくとも 2 つの異なるバージョンを推奨しています。たとえば、.ogg と .mp3 です。

            $("#player").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        oga: "http://www.vigrond.com/jplayerTest/beer.ogg",
                        mp3: "http://www.vigrond.com/jplayerTest/beer.mp3"
                    }).jPlayer("play");
                },
                supplied: "oga, mp3",
                swfPath: "/js",
                solution: "html,flash"
            });

例として、コードとディレクトリ構造を使用して、目に見えないjPlayerプレーヤーのテスト ページをここにセットアップしました。 使用-jplayer/

これが役立つかどうか教えてください！

于 2011-12-01T23:47:07.180 に答える