HTML5 Video Audio

HTML5 Video Audio

Video

<video src="movie.ogg" controls="controls">抱歉,您的浏览器不支持。</video>
属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

视频格式啥的戳我

更多属性方法戳我

【示例】

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

【示例】

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>

audio

<audio src="song.ogg" controls="controls">抱歉,您的浏览器不支持。</audio>

属性|值|描述
--|--|
autoplay|autoplay|如果出现该属性,则音频在就绪后马上播放。
controls|controls|如果出现该属性,则向用户显示控件,比如播放按钮。
loop|loop|如果出现该属性,则每当音频结束时重新开始播放。
preload|preload|如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
src|url|要播放的音频的 URL。

【示例】

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

【示例】

音频格式啥的戳我

更多属性方法戳我

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容