Home 计算机科学 Master of Software Engineering ITMM 565. Rich Internet Applications

# HTML5 Video & Audio

  • Built in support for playing audio and video in the browser without plugins like flash or silverlight
    内置支持在浏览器中播放音频和视频，不需要像 flash 或 silverlight 这样的插件
  • Uses the <video> or <audio> tag for basic support.
  • Traditionally format/codec support was mixed between browser manufacturers, and we needed to supply different formats
    传统上，浏览器厂商对格式 / 编解码器的支持是混合的，我们需要提供不同的格式
  • As of 2016 h.264 mp4 and mp3 is supported in most browsers
  • In Oct 2013 Cisco announced they would make a h.264 module available to all
  • You can provide fallback content inside the tag if the browser doesn't support it
    如果浏览器不支持，您可以在标记内提供备用内容
  • There are attributes for controls, autoplay, loop, preload. See element docs

# <source> tag

The <source> tag can be nested inside the <video> or <audio> tag to supply multiple formats

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
    <p>Your browser does not support the <code>video</code> element.</p>
</video>
<video controls>
    <source src="SampleVideo.ogv" type="video/ogv">
    <source src="SampleVideo.mp4" type="video/mp4">
    <p>Your browser does not support the <code>video</code> element.</p>
</video>

# DEMO

audio
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5 Audio</title>
</head>
<body>
	<audio id="audiosrc" src="BrahmsSymphony-fromFourthMovement.mp3" controls></audio>
</body>
</html>
video
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5 Video</title>
</head>
<body>
	<button id="btn">Play</button>
	<button id="btn-stop">Pause</button>
	<video id="vid" controls> 
	  <source src="small.webm" type="video/webm"> 
	  <source src="small.ogv" type="video/ogg"> 
	  <source src="small.mp4" type="video/mp4">
	  <source src="small.3gp" type="video/3gp">
	</video>
	
	<script>
		document.getElementById('btn').addEventListener('click', function(){
			document.getElementById('vid').play();
		});
		document.getElementById('btn-stop').addEventListener('click', function(){
			document.getElementById('vid').pause();
		});
		document.getElementById('vid').addEventListener('ended', function(e){
			console.log(e);
			alert('video is finished');
		});
	</script>
</body>
</html>
# Geolocation
  • The geolocation API allows the user to provide their location to web applications if they so desire.
    如果用户愿意，地理位置 API 允许用户向 web 应用程序提供他们的位置。
    For privacy reasons, the user is asked for permission to report location information.
    出于隐私考虑，用户需要获得报告位置信息的许可。
  • The API is published through the navigator.geolocation object
    API 是通过 navigator.geolocation 发布的对象
  • getCurrentPosition() method is used to query the browser for a location object
    getCurrentPosition() 方法用于在浏览器中查询一个位置对象
  • Takes a callback function that runs when the browser responds with a location and also takes an optional second callback function to run if there is an error
    接受一个回调函数，该函数在浏览器响应一个位置时运行，也接受一个可选的第二个回调函数，在出现错误时运行
  • watchPosition() method can be used to continually update the position
    watchPosition() 方法可用于持续更新位置
  • https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API
navigator.geolocation.getCurrentPosition(function(position) {
    do_something(position.coords.latitude, position.coords.longitude);
});
# DEMO
geolocation
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Geolocation</title>
    <script>
        let options = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
        };
        function success(pos) {
            let crd = pos.coords;
            console.log('Your current position is:');
            console.log(`Latitude : ${crd.latitude}`);
            console.log(`Longitude: ${crd.longitude}`);
            console.log(`More or less ${crd.accuracy} meters.`);
            let wrapper = document.createElement('div');
            let text = `Your current position is: <br>
            Latitude: ${crd.latitude}<br>
            Longitude: ${crd.longitude}<br>
            More or less ${crd.accuracy} meters.`;
            wrapper.innerHTML = text;
            document.getElementsByTagName('body')[0].appendChild(wrapper);
        }
        function error(err) {
            console.warn(`ERROR(${err.code}): ${err.message}`);
            let wrapper = document.createElement('div');
            let text = `Error(${err.code}): ${err.message}`;
            wrapper.innerHTML = text;
            document.getElementsByTagName('body')[0].appendChild(wrapper);
        }
        navigator.geolocation.getCurrentPosition(success, error, options);
    </script>
</head>
<body>
    
</body>
</html>
geolocation basic
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function success(p){
			console.log(p);
			alert('Lat: ' + p.coords.latitude + ', Long: ' + p.coords.longitude);
			document.getElementsByTagName('body')[0].appendChild(document.createTextNode('Lat: ' + p.coords.latitude + ', Long: ' + p.coords.longitude));
		}
		function error(e){
			console.log(e);
			alert('Error: ' + e.message);
		}
		navigator.geolocation.getCurrentPosition(success, error);
		
	</script>
</head>
<body>
	
</body>
</html>
geolocation map
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <style type="text/css">
      #map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">
      navigator.geolocation.getCurrentPosition(function(p){
        console.log(p);
        
        let map = new google.maps.Map(document.getElementById('map'), {
          center: {
            lat: p.coords.latitude,
            lng: p.coords.longitude
          },
          zoom: 14
        });
        let marker = new google.maps.Marker({
          map: map,
          position: {
            lat: p.coords.latitude,
            lng: p.coords.longitude
          }
        });
      });
    </script>
  </body>
</html>
# Web Workers
# Websockets
# Quiz 6
  1. You can supply multiple files in different video formats to the HTML 5 video tag and let the browser use the one that it prefers.
  2. In JSON you can use single quotes to enclose property names and string property values.
  3. Which of the following ES6 features only allows unique values to be included?
    • map
    • set
  4. When using XMLHttpRequest to make an AJAX POST call you pass the request body as a parameter to the open method?
  5. Backticks ` are used to create template strings.
  6. When using XMLHttpRequest to make an AJAX call what is the ready state value when everything is done?
    • 1
    • 2
    • 3
    • 4
    • 5
  7. ES6 arrow functions must have a return statement if you want to return a value when the function is run.
  8. When you call the geolocation getCurrentPosition method it directly returns the gps position as its return value.
  9. Which web storage technology allows you to store strings in a key/value storage that only persists until the user closes their browser?
    • sessionStorage
    • localStorage
    • Web SQL
    • File Access
  10. Which of the following ES6 features allows you to define a function that takes unlimited parameters?
    • spread
    • rest
    • destructuring
    • default parameters
 
 已有0条评论