开发者

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

I am autoplaying an html5 in a web app running in a UIWebView browser. I would like for the user to be able to touch the screen and be redirected to a new page. Since the video is autoplayed, I am able to omit the controls altogether (and that part is all working just fine). Is this redirection possible?

So far I have tried:

adding a link around the video tags <a href="http://www.example.com"><video type='video/mp4' id="myVideo" width="800" height="568" src="video1.开发者_开发技巧ipad.mp4" autoplay></video></a>

adding an onClick event to the video tag itself <video type='video/mp4' id="myVideo" width="800" height="568" src="video1.ipad.mp4" onClick="document.location.href='http://www.example.com';" autoplay></video>

adding a div around the video with an onClick event (and then when that didn't work, increasing the div's z-index to make sure it was on top of the video) <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>

any ideas would be much appreciated...


I happened to find something that worked today while working on another project! I thought I would post it here in case anyone else needs this functionality.

Basically, I created a link surrounding a transparent div that is the full size of the screen and sits on top of everything else via 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>


Using your second approach (onclick) should work if you actually used the correct variable :)

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

Note window, not document.

(disclaimer: didn't test this on iPad but worked in Chrome)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜