Question

我正在尝试在简单的HTML5页面中显示音频和谷歌地图。当我在Chrome等其他外部浏览器中运行它时，Mozilla一切都运行良好。

但同样不适用于我的eclipse内部网页浏览器，我只希望输出。

这是我在GitHub上的项目链接： https://github.com/Venkatesh-Devale/cmpe273/tree/master/StaticRefresher

请帮助我知道为什么会这样？

＆＃13;

@CHARSET "UTF-8";

#divVideo, #divAudio {
	
	width:40%;
}


#divMyHeader {
	background-color:orange;

}

#map {
        height: 400px;
        overflow: auto !important; 
}

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="hello.css">

</head>
<body>
<div id="divMainPage">
	<div id="divMyHeader">
		<h1>Venkatesh Devale</h1>
		<h6>SJSU ID: 012420148</h6>
	</div>
	<div id="content">
	<p>	
		I am creating this page to introduce me as we all are pretty new,
		through this refresher assignment. 
		Below is my short video which will tell you about myself.
	</p>
	<div id="divVideo">
		<video controls>
			<source src="mov_bbb.mp4" type="video/mp4">
			<source src="mov_bbb.ogg" type="video/ogg">
		</video>
	</div>
	<p>
		Below is my favorite songs audio. Please guess it.
	</p>
	<div id="divAudio">
		<audio controls>
			<source src="horse.ogg" type="audio/ogg">
			<source src="horse.mp3" type="audio/mpeg">
		</audio>
	</div>
	</div>
	<div id="divFeedbackShowingInputTypes" style="border-style:groove;">
	<form>
		<table>
		<tr>
			<td>First Name:</td>
			<td><input type="text" name="txtFirstName" autofocus></td>
		</tr>
		<tr>
			<td>Last Name:</td>
			<td><input type="text" name="txtLastName"></td>
		</tr>
		<tr>
			<td>Email:</td>
			<td><input type="email" name="email" title="<any characters>@<your mail account>.com" pattern="[a-zA-Z]+[@][a-zA-Z]+[.com]" required></td>
		</tr>
		<tr>
			<td>Telephone:</td>
			<td><input type="tel" name="phone" title="XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required></td>
		</tr>
		<tr><td></td>
			<td><input type="submit" name="btnSubmit" value="Submit"></td>
		</tr>
		
	</table>
	
	</form>
	</div>
	<div id="myGeoLocatioWithMap">
		<div id="map">
		</div>
	</div>
</div>

<script>
var myMap, myLocationPanel;

function getFirstMap() {
  	myMap = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -58.397, lng: 197.644},
    zoom: 7
  	});

  	myLocationPanel = new google.maps.InfoWindow;

  	if (navigator.geolocation) {
  		console.log("Geolocation is available");
    	navigator.geolocation.getCurrentPosition(showMyPosition, findLocationNotFoundError);
  	} else {
    	handleLocationError(false, myLocationPanel, myMap.getCenter());
  	}
}

function showMyPosition(position) {
	console.log("Geolocation is available");
	var myPosition = {
		lat: position.coords.latitude,
		lng: position.coords.longitude
	};
	
	myLocationPanel.setPosition(myPosition);
	myLocationPanel.setContent("Your location is here");
	myLocationPanel.open(myMap);
	myMap.setCenter(myPosition);

	var marker = new google.maps.Marker({
		position: myPosition,
		map: myMap
	});
}

function findLocationNotFoundError() {
	showLocationError(true, myLocationPanel, myMap.getCenter());
}

function showLocationError(checkDoesBrowserHasLocation, myLocationPanel, mapCenter) {
  	myLocationPanel.setPosition(mapCenter);
  	if(checkDoesBrowserHasLocation) {
  		myLocationPanel.setContent('Somehow geolocation service is not working, we are fixing it');
  	} else {
  		myLocationPanel.setContent('Seems that the browser does not support the geolocation');
  	}
  	myLocationPanel.open(myMap);
}
 </script>
 
 <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBd-SiW0EEjuidG6nhM6iSeDt9epJPvYno&callback=getFirstMap">
 </script>
</body>
</html>

＆＃13;

Eclipse内部Web浏览器中的HTML5地理定位和音频

0 个答案: