温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML5学习第二节 HTML5新元素的介绍

发布时间:2020-06-10 19:04:06 来源:网络 阅读:779 作者:nnds74939347 栏目:移动开发

首先要检查你的浏览器是否支持HTML5,主要的JS代码如下:

function check_html5()
{
if(!!document.createElement('video').canPlayType)
  {
  var vidTest=document.createElement("video");
  oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
  if (!oggTest)
    {
    h364Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    if (!h364Test)
      {
      document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
      }
    else
      {
      if (h364Test=="probably")
        {
        document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
        }
      else
        {
        document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
        }
      }
    }
  else
    {
    if (oggTest=="probably")
      {
      document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
      }
    else
      {
      document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
      }
    }
  }
else
  {
  document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
  }
}

一、HTML5下的视频引用方式

通过以上的检查之后,笔者用火狐测试了这个功能。视频的元素是 video ,video 元素支持两种格式的视频:

 IE 8Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg √√√ 
MPEG 4   √√

其中 ogg 是指带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 是指 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

代码如下:

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

以上代码的意思是:引用一段视频,宽320 高240  controls意思是带有视频控制 source 是视频地址,video元素允许有多个source元素,浏览器选择自己识别的第一个视频格式

video元素属性如下:

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
preloadpreload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

剩余这些属性读者可以自己测试看看,注意选择一个支持性好的浏览器测试哦。

 

二、HTML5下的音频

至目前为止网上大多数的音频播放器仍然是FLASH,在HTML5中可以用audio元素来代替它,audio 元素能够播放声音文件或者音频流。audio支持的音频格式如下:

 IE 8Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg Vorbis &radic;&radic;&radic; 
MP3   &radic;&radic;
Wav &radic;&radic; &radic;

在页面中引用方式如下:

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

大家可以看到和视频的引用方式没有太大的区别,这个就不用解释了吧,audio元素的其他属性如下:

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则每当音频结束时重新开始播放。
preloadpreload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

srcurl要播放的音频的 URL。

三、HTML5下的绘制图形

在HTML5中可以使用 canvas 结合 javascript  绘制图形,示例代码如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

这段代码本身并不能画图,需要通过以下的JS代码来画图

<script type="text/javascript">
var c=document.getElementById("myCanvas");//获取ID为myCanvas的元素
var cxt=c.getContext("2d");//创建context对象,context对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cxt.fillStyle="#FF0000";//设置context对象的fillStyle属性,即是背景颜色
cxt.fillRect(0,0,150,75);//调用fillRext 方法,创建矩形图像,从坐标(0,0)画至坐标(150,75)
</script>

如果需要了解过多的context对象的话去搜索下关于这个对象的其他方法吧。

 四、客户端数据存储

TML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储

  • sessionStorage - 针对一个 session 的数据存储

在HTML5出来之前,都是由COOKIE来做这些工作,但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。不过IE和火狐都有其他的客户端存储数据方式,IE有它的userdata 火狐有它的 globalStorage ,但是有了HTML5的这两种新的存储方式,其他一切存储方式都是浮云。

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。当然了这种请求方式和userdata globalStorage都差不多的,请求要快的多。

关于localStorage方法:

localStorage 方法存储的数据没有时间限制。

测试代码如下

<script>

if(localStorage.count)localStorage.count = Number(localStorage.count)+1;
else localStorage.count = 1;
alert(localStorage.count)

</script>

关于sessionStorage方法:

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除

测试代码如下:

if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
alert(sessionStorage.pagecount)

我是在火狐下测试的,刷第一次的时候是1,如果不清除COOKIE的情况下再刷,第二次就是2,但是清除COOKIE之后再刷,结果会是1,难道这些存储方式还和COOKIE还有藕断丝连的关系?

 

 

 

 

 

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI