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)


相关推荐

  • 我离开jQuery(layui)选择vue[通俗易懂]

    我离开jQuery(layui)选择vue[通俗易懂]layui采用的是jquery做底层的支撑,熟悉jQuery的朋友使用自然觉得好用;但是jQuery对数据、DOM的处理【繁琐】。刚接触vue可能会很难转换思维模式,但使用一段时间会自然熟悉vue的思维方式,使用简单,且vue的开源免费UI框架多,易用。离开layui后我用了一周学习了vue。我离开layui的重点是layui的【飞吻】获取麻烦,还收费;社区提问还有钱。。受不了。…

  • IntelliJ idea自定义模板Live Templates[通俗易懂]

    IntelliJ idea自定义模板Live Templates[通俗易懂]1、点击File–&gt;Setting(Ctrl+Alt+S)–&gt;Live Template,点击右侧的+号,选择Template Group2、输入MyGroup(也可以输入自定义的名称。我写的是My),然后点击OK3、选中My之后,再次点击右侧的+号,选择Live Template下图是 正确是 public static void main(String[] args)   粗心…

  • hmily源码解读

    hmily源码解读一阶段TRYING入口点orderService.orderPayorderService.orderPay->CglibAopProxy$DynamicAdvisedInterceptor.intercept->methodProxy.invoke->OrderServiceImpl.orderPay业务…

  • MySQL生产环境主从关系数据不同步

    MySQL生产环境主从关系数据不同步

  • 基于JavaWeb网上商城(以卖书为主)

    基于JavaWeb网上商城(以卖书为主)本文章是JavaWeb课程的课程设计1.项目概况1.1课题背景、目的及意义1.1.1课题背景随着互联网的普及和电子商务的兴起,网上图书销售是互联网电子商务在图书销售行业中的必然结果,这种新型的图书销售形式越来越受人们的欢迎,正在以不可阻挡的气势替代着传统的图书销售模式。与其传统销售模式相比拥有许多优势,一是降低了销售成本,二是利用互联网作为交易平台,是的交易活动不受时间和空间的限制,…

  • EnterpriseLibrary6.0 log2database

    EnterpriseLibrary6.0 log2database1、引用EnterpriseLibrary6.0相关dll2、安装Microsoft.Practices.EnterpriseLibrary.ConfigConsoleV6.vsix  主要为了方便编辑config文件,不是必须安装,安装后需要更改解决方案属性,将EnterpriseLibraryv6binariespath指向企业库6.0的bin目录3、执行sql脚本创…

    2022年10月20日

发表回复

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

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