Question

我使用flowplayer作为我的html5视频播放器（https://flowplayer.org/latest/）。我已经为用户添加了一个额外的按钮，用户可以在用户点击视频后播放该视频。只要用户点击“播放视频”，它就可以在我的笔记本电脑或台式机上正常工作。按钮，视频会播放。

然而，当我在手机或朋友的手机或任何其他手机（已尝试过所有iphone和一些机器人）上进行测试时，视频无法播放。

所以，我尝试在桌面上使用谷歌浏览器调试并激活移动模式。它给了我这个错误＆＃34; Uncaught TypeError: Cannot read property 'play' of undefined＆＃34;在我点击该按钮时在控制台上。但是当我退出移动模式时，它再次正常工作而不会出现任何错误。

你知道我怎么能解决这个问题？感谢。

    <html>
    <head>
        <!-- player skin -->
        <link rel="stylesheet" href="skin/functional.css">
        <!-- site specific styling -->
        <style>
        body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 5%; }
        .flowplayer { width: 80%; }
        </style>
        <!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ -->
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <!-- include flowplayer -->
        <script src="flowplayer.min.js"></script>
    </head>
    <body>
        <!-- the player -->
        <div>
        <div class="player" style="width:50%;" data-embed="false">
        <!-- <di class="player" data-embed="false" data-swf="flowplayer.swf" data-ratio="0.4167"> -->
            <video id="player">
                <source type="video/webm" src="https://stream.flowplayer.org/bauhaus.webm">
                <source type="video/mp4" src="https://stream.flowplayer.org/bauhaus.mp4">
            </video>
        </div>

        <button id="playbutton">Play Video</button>


        </div>
    </body>
    </html>
<script>
    // run script after document is ready
    $(function () {
        $('#playbutton').click(function(e){
            $('#player').get(0).play();
        });
    });
</script>

Answer 1

您收到此错误，因为当检测到移动设备时，Flowplayer会更改页面的HTML。它会更改video代码，因此您的Javascript无法找到#player。您应该使用Flowplayer Javascript API。在这里，您可以找到适用于桌面和移动浏览器的小示例：

<html>
    <head>
        <!-- The "functional" skin - choose from: "functional.css", "minimalist.css", "playful.css" -->
        <link rel="stylesheet" href="http://releases.flowplayer.org/6.0.3/skin/functional.css">
        <!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ -->
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <!-- include flowplayer -->
        <script src="http://releases.flowplayer.org/6.0.3/flowplayer.min.js"></script>
        <script>
            // run script after document is ready
            $(function () {
                $('#playbutton').click(function(e){
                    flowplayer(0).load({
                         sources: [
                           { type: "video/webm", src: "http://stream.flowplayer.org/functional.webm" },
                           { type: "video/mp4",  src: "http://stream.flowplayer.org/functional.mp4" }
                        ]
                      });
                });
            });
        </script>
    </head>
    <body>
        <!-- the player -->
        <div>
            <div class="flowplayer" data-ratio="0.4167">
               <video>
                    <source type="video/webm" src="http://stream.flowplayer.org/functional.webm">
                    <source type="video/mp4"  src="http://stream.flowplayer.org/functional.mp4">
               </video>
            </div>
            <button id="playbutton">Play Video</button>
        </div>
    </body>
</html>

有关该示例的详细信息，请参阅此处： http://demos.flowplayer.org/api/load.html

视频外部按钮无法在移动设备上播放，但适用于桌面/移动设备

1 个答案: