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 解决方案，然后使用此默认设置回退到 flash：

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

为了使 Flash 支持起作用，您必须将 swfPath 设置为 jPlayer 附带的 Jplayer.swf 文件的包含目录。 

swfPath: "/js"

此外，jPlayer 建议至少 2 个不同版本的同一文件，以最大限度地支持 HTML5。例如，.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播放器的测试页面，代码和目录结构：http: //vigrond.com/blog/2011/12/01/invisible-html5-flash-audio-player-使用-jplayer/

让我知道这是否有帮助！

于 2011-12-01T23:47:07.180 回答