HTML5

来源：互联网发布：投资网络编辑：程序博客网时间：2024/06/05 05:41

视频/音频

//视频<!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;" controls="controls"> //controls添加播放、暂停和音量控件    <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.  //不支持vedio显示这里的内容  </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>

属性值描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

//音频<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>

属性值描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src url 要播放的音频的 URL。

拖放

<!DOCTYPE HTML><html><head><style type="text/css">#div1, #div2{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev){ev.preventDefault();//避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);//数据类型是 "Text"，值是可拖动元素的 id ("drag1")}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">  <img src="./i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" /></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body></html>

HTML 5 Canvas
canvas 元素使用 JavaScript 在网页上绘制图像

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

内联 SVG

可伸缩矢量图形

Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

阅读全文

0 0