HTML5的新特性

最新推荐文章于 2022-09-27 18:44:08 发布

chongshangyunxiao321

最新推荐文章于 2022-09-27 18:44:08 发布

阅读量593

点赞数

分类专栏： Web前端开发文章标签： html5

本文链接：https://blog.csdn.net/chongshangyunxiao321/article/details/51159170

版权

Web前端开发专栏收录该内容

12 篇文章 3 订阅

订阅专栏

HTML5 中的一些有趣的新特性：

1、用于绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section
5、新的表单控件，比如 calendar、date、time、email、url、search

这里写图片描述

HTML5《video》元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，《video》元素开始播放、已暂停，已停止，等等。

下例中简单的方法，向我们演示了如何使用《video》元素，读取并设置属性，以及如何调用方法。

为视频创建简单的播放/暂停以及调整尺寸控件：

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center;">
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br /> 
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div> 

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 

</body> 
</html>

这里写图片描述

chongshangyunxiao321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5的新特性

HTML5 中的一些有趣的新特性：1、用于绘画的 canvas 元素 2、用于媒介回放的 video 和 audio 元素 3、对本地离线存储的更好的支持 4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search HTML5《video》元素同样拥有方法、
复制链接

扫一扫