iPad上的HTML5视频元素不会触发clickClick或touchstart事件? [英] HTML5 Video Element on iPad doesn't fire onclick or touchstart events?

查看:195
本文介绍了iPad上的HTML5视频元素不会触发clickClick或touchstart事件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在iPad网络应用程序中将一些事件附加到HTML5视频元素,但它们似乎并未触发?我已经测试了这两个在设备和模拟器,并得到相同的结果。然而事件(至少onclick)在桌面Safari中工作正常。我也试过交换视频元素为一个div和事件火罚款?有没有其他人遇到这个问题,并有想法的工作?

I'm trying to attach some events to an HTML5 Video element inside my iPad web app but they don't seem to be firing? I've tested this both on the device and in the simulator and get the same results. The events however (for the onclick at least) work fine in desktop Safari. I've also tried swapping the video element for a div and the events fire fine? Has anybody else come across this and have an idea for a work around?

<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                <title>Test video swipe</title>
        </head>
        <body>

                <video src='somevid.mp4' id='currentlyPlaying' width='984' height='628' style='background-color:#000;' controls='controls'></video>

                <script>
                        var theVid = document.getElementById("currentlyPlaying");

                                theVid.addEventListener('touchstart', function(e){
                                        e.preventDefault();
                                        console.log("touchstart");
                                }, false);

                                theVid.addEventListener('click', function(e){
                                        e.preventDefault();
                                        console.log("click");
                                }, false);

                                theVid.addEventListener('touchmove', function(e){
                                        console.log("touchmove");
                                }, false);

                                theVid.addEventListener('touchend', function(e){
                                        console.log("touchend");
                                }, false);

                                theVid.addEventListener('touchcancel', function(e){
                                        console.log("touchcancel");
                                }, false);



                </script>
        </body>
</html>


推荐答案

如果你使用controls属性。如果您希望元素响应触摸事件,您必须提供自己的控件。

The video element, on the iPad, will swallow events if you use the controls attribute. You have to provide your own controls if you want the element to respond to touch events.

这篇关于iPad上的HTML5视频元素不会触发clickClick或touchstart事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆