Html5 视频(html文件怎么打开)

video元素支持3种视频格式格式IE9+FirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+NoOgg=带有Theora视频编码和Vorbis音频…

大家好,又见面了,我是你们的朋友全栈君。

video元素支持3种视频格式

格式 IE 9+ Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Eg.

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

<video> 标签的属性

属性 值 描述
方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
  duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  

Eg.

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

转载于:https://www.cnblogs.com/neoAmell/p/4281740.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/128940.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号