HTML5

最新推荐文章于 2023-06-10 12:48:13 发布

qingemengyue

最新推荐文章于 2023-06-10 12:48:13 发布

阅读量204

点赞数

分类专栏： HTML html5 文章标签： html5

本文链接：https://blog.csdn.net/qingemengyue/article/details/74922974

版权

HTML 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

视频/音频

//视频
<!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 的应用都不快）
不适合游戏应用

qingemengyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5

视频/音频//视频 html> body> div style="text-align:center;"> button onclick="playPause()">播放/暂停button> button onclick="makeBig()">大button> button onclick="makeNormal()">中button> button oncl
复制链接

扫一扫

专栏目录