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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • how tomcat works 札记(两)———-一个简单的servlet集装箱

    how tomcat works 札记(两)———-一个简单的servlet集装箱

  • 图形的光栅化_简述图像的采样和量化过程

    图形的光栅化_简述图像的采样和量化过程在前面的学习中,我们已经可以通过MVP变换,把摄像机观测的物体都压缩成了一个标准立方体,接下来我们要做的是把这个标准立方体绘制到屏幕(Screen)上何为屏幕?一个二维数组,每个元素称之为像素(pixel,pictureelement的缩写),例如我们常说的屏幕分辨率1920*1080,就是说有这么些个像素。屏幕是一个典型的光栅成像设备。光栅(Raster)在德语中就是屏幕的意思,光栅化(Rasterize,名变动)就是把东西画在屏幕上。像素,最小单位,像素内的颜色可以用rgba来定义,一

  • nginx中proxy_pass的使用(alias和root使用)

    nginx中proxy_pass的使用(alias和root使用)

  • ajaxSubmit、ajaxSubmit添加额外数据

    ajaxSubmit、ajaxSubmit添加额外数据varoptions={ async:false, data:{“name”:”name”}, success:function(data){ //resultVO为自用方法 resultVO.checkCode(data,function(data){ if(data){ log(“保存成功”); …

    2022年10月23日
  • Python里divmod_python基本函数

    Python里divmod_python基本函数前言我们都知道,python中//代表整数运算中的取整,%代表整数运算中的取余,那么有什么函数可以同时取到整数和余数吗?答案是有的,使用python内置函数divmoddivmod首先看一下源

  • java中的maven_maven创建web项目

    java中的maven_maven创建web项目一、前言早就知道maven在java项目的管理方面名声显赫,于是就想着学习掌握之,于是查阅了大量文档。发现这些文档的作者都是java的大腕,大多都是站在掌握了一定maven基础的角度上进行介绍,让我这初学者看的云里雾里不知所云。于是又去查看maven的官方网站,总算是有所了解,但一旦动手实际操作却又雾里看花。唉,没办法,就只有一遍一遍的动手尝试,经过种种磨难总算是有一点眉…

发表回复

您的电子邮箱地址不会被公开。

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