HTML5的Video使用基础

http://www.jb51.net/w3school/html5/html_5_video.htm(Video)

http://www.jb51.net/w3school/tiy/t.asp-f=html5_video_dom.htm(Video和Dom)


自己的例子:D:\.....\HTML5\video.html


例子1:

<!DOCTYPE HTML>

<html>

<body>


<video width="320" height="240" controls="controls">

  <source src="../i/movie.ogg" type="video/ogg">

  <source src="D:/Picture/Iphone4/965YOKDJ/IMG_2430.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>


</body>

</html>


例子2:

<!DOCTYPE html> 

<html> 

<body> 


<div style="text-align:center;">

  <button οnclick="playPause()">播放/暂停</button> 

  <button οnclick="makeBig()">大</button>

  <button οnclick="makeNormal()">中</button>

  <button οnclick="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>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值