七彩课堂[网页设计教程]
Html网页视频代码

Html网页视频代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程1</title>
</head>
<body>
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta?charset="utf-8">
<title>菜鸟教程2</title>?
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
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>
<!DOCTYPE html>
<html lang="en">
<head>
<title>hivideo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/hivideo.css" />
<script type="text/javascript" src="hivideo.js"></script>
<style type="text/css">
.main-wrap{
margin: 0 auto;
min-width: 320px;
max-width: 640px;
}

.main-wrap video{
width: 100%;
}
</style>
</head>
<body>
<div class="main-wrap">
<video ishivideo="true" autoplay="true" isrotate="false" autoHide="true">
<source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type="video/mp4">
</video>
</div>
</body>
</html>

信息推荐
财经资讯 | 电子商务 | 搜索营销 | 设计学院 | 健康常识 | 养生保健 | 节日祝福 | 民俗文化 | 星座命理
星座运势 | 生日短信 | 新年短信 | 传统节日 | 奇闻异事 | 百姓健康 | 趣闻轶事 | 祝福的话 | 手机短信
© 2018 QicaiSpace.Com