从html5 <video>的点击/触摸事件重定向到另一个页面元素

Redirecting to another page from a click/touch event on html5 <video> element in iPad?

本文关键字：重定向 事件 另一个 触摸 元素 video html5      更新时间：2023-09-26

我在UIWebView浏览器中运行的web应用程序中自动播放html5。我想为用户能够触摸屏幕，并被重定向到一个新的页面。由于视频是自动播放的，我可以完全省略控制(这部分工作得很好)。这种重定向是可能的吗?

到目前为止，我已经试过了:

在视频标签周围添加链接<a href="http://www.example.com"><video type='video/mp4' id="myVideo" width="800" height="568" src="video1.ipad.mp4" autoplay></video></a>

为视频标签本身添加onClick事件<video type='video/mp4' id="myVideo" width="800" height="568" src="video1.ipad.mp4" onClick="document.location.href='http://www.example.com';" autoplay></video>

用onClick事件在视频周围添加div(然后当这不起作用时，增加div的z-index以确保它位于视频的顶部)<div onclick="location.href='http://www.example.com';" style="cursor:pointer; z-index:10;"><video type='video/mp4' id="myVideo" width="800" height="568" src="video1.ipad.mp4" autoplay></video></div>

我今天在做另一个项目的时候碰巧发现了一些有用的东西!我想我应该把它贴在这里，以防有人需要这个功能。

基本上，我创建了一个围绕透明div的链接，它是屏幕的整个尺寸，并通过z-index位于其他所有内容的顶部。

<style>.videocontainer { position:absolute; width:1024px; height:768px; z-index:10000; }</style>
<a href="index.html"><div class="videocontainer"></div></a>
<video id="myVideo" width="1024" height="768" src="video/video1.ipad.mp4" autoplay></video>

如果您实际使用了正确的变量，则使用第二种方法(onclick)应该可以工作:)

<video type='video/mp4' id="myVideo" width="800" height="568" 
       src="video1.ipad.mp4" 
       onclick="window.location='http://www.example.com';" autoplay></video>

注意窗口,没有文档。

(免责声明:没有在iPad上测试，但在Chrome上运行)

相关文章：