视频外部按钮不能在手机上播放，但可以在桌面/移动设备上运行

Video external button won't play on mobile, but works on desktop/mobile

本文关键字：桌面 运行 移动 但可以 播放 按钮 外部 不能 手机 视频      更新时间：2023-09-26

我使用flowplayer作为我的html5视频播放器(https://flowplayer.org/latest/)。我已经为用户添加了一个额外的按钮，一旦用户点击它就可以播放视频。它在我的笔记本电脑或台式机上工作得很好，每当用户点击"播放视频"按钮时，视频就会播放。

然而，当我在我的手机或我朋友的手机或任何其他手机(我试过所有的iphone和一些android)上测试时，视频无法播放。

所以，我试着在我的台式机上调试谷歌浏览器并激活移动模式。每当我点击该按钮时，它就会在控制台上显示此错误"Uncaught TypeError: Cannot read property 'play' of undefined"。但是当我退出移动模式时，它又工作得很好，没有任何错误。

你知道我怎么解决这个问题吗?谢谢。

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

你得到这个错误是因为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

相关文章：