前端开发 \ Html5 \ html5实现视频(放大缩小播放暂停)

html5实现视频(放大缩小播放暂停)

总点击217
简介:效果如下图: <!DOCTYPEhtml> <html> <body> <metacharset=\"utf-8\"> <divstyle=\"text-align:center;\">

效果如下图:


html5实现视频(放大缩小播放暂停)

<!DOCTYPE html>

<html>

<body>

<meta charset="utf-8">

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

<source src="mov_bbb.mp4" type="video/mp4" /> <!-- 视频 必须是自己的 视频名称 视频路径-->

<source src="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>

意见反馈 常见问题 官方微信 返回顶部