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

【问题标题】：Video external button won't play on mobile, but works on desktop/mobile视频外部按钮无法在移动设备上播放，但适用于桌面/移动设备
【发布时间】：2015-10-07 11:04:01
【问题描述】：

我使用 flowplayer 作为我的 html5 视频播放器 (https://flowplayer.org/latest/)。我添加了一个额外的按钮供用户在用户点击视频后播放视频。它在我的笔记本电脑或台式机上运行良好，只要用户点击“播放视频”按钮，视频就会播放。

但是，当我在我的手机或我朋友的手机或任何其他手机（已尝试所有 iphone 和一些 android）上测试时，视频无法播放。

因此，我尝试在桌面上使用 google chrome 进行调试并激活移动模式。每当我单击该按钮时，它都会在控制台上给我这个错误“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>

【问题讨论】：

标签： javascript android jquery html video

【解决方案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

【讨论】：

嗨，这绝对有效！但是，如果我想保持自己的格式怎么办，还有其他解决方案吗？或者我只需要坚持这个唯一的解决方案？谢谢！