H5标签及其属性

最新推荐文章于 2024-05-31 22:11:41 发布

Smile96love

最新推荐文章于 2024-05-31 22:11:41 发布

阅读量430

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Smile96love/article/details/97308153

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.video/audio 标签的属性
autoplay=“autoplay”视频在就绪后马上播放。
controls=“controls“ 向用户显示控件，比如播放按钮。
height=”xxpx" 设置视频播放器的高度。
loop=“loop” 当媒介文件完成播放后再次开始播放。
preload="preload "视频在页面加载时进行加载，并预备播放;如果使用 “autoplay”，则忽略该属性。
src=“网址"l 要播放的视频的 URL。
width=”xxpx” 设置视频播放器的宽度。

2.视频+DOM：

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

<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>

3.拖放：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev) //规定了被拖动的数据。
{
ev.dataTransfer.setData("Text",ev.target.id);//设置被拖数据的数据类型和值,数据类型是 "Text"，值是可拖动元素的 id ("drag1")
}

function drop(ev)     //当放置被拖数据时，会发生 drop 事件。
{
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)"></div>  //在何处放置被拖动的数据。
<img id="drag1" src="img_logo.gif" draggable="true"//设置元素为可拖放
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

Smile96love

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5标签及其属性

1.video/audio 标签的属性autoplay=“autoplay”视频在就绪后马上播放。controls=“controls“ 向用户显示控件，比如播放按钮。height=”xxpx" 设置视频播放器的高度。loop=“loop” 当媒介文件完成播放后再次开始播放。preload="preload "视频在页面加载时进行加载，并预备播放;如果使用 “autoplay”，则忽略该...
复制链接

扫一扫