当前位置: 代码迷 >> HTML/CSS >> html5 video标签在iphone中的有关问题
  详细解决方案

html5 video标签在iphone中的有关问题

热度:291   发布时间:2012-07-26 12:01:08.0
html5 video标签在iphone中的问题

我再页面中用video标签加入一段视频,但是我想做出在视频上方一个层让后放一个按钮,执行单机事件,但是无效代码如下:<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>border-image</title>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<style>
	
	
</style>
<script>
	$(function(){
		
		
		$("button").bind("touchstart",function(){
			$("#wView")[0].play();
		});
		$("#btn").click(function(){
			$("#wView")[0].pause();
		});
	});
</script>
</head>
<body>
	<div>
	<video id="wView" width="320" height="240" controls  autoplay>
		<source src="audio/0b293211-c163-4607-9bc1-2c505c2d111b.mp4" type="video/mp4" />
		浏览器不支持
	</video>
	</div>
	<div style="position: absolute;z-index: 50;background: red;top: 100px;left: 50px;">
	<button>Click Me</button>	
	<input type="button" id="btn" value="暂停" />
	</div>
</body>
</html>

? 页面显示如下:



?可是无论我怎么点击都是没有反应,只要是video上的怎么操作都无效,但是在pc机上就没有这个问题,真不知道是iphone的bug还是故意弄成这样的!但是解决方法很简单:再回顾上面代码video标签只要把video标签中的controls属性去掉,居然启作用了,这回想怎么操作都可以了!

  相关解决方案