`

Video元素

 
阅读更多
引用
<!DOCTYPE html>
<html>
<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>
分享到:
评论

相关推荐

    第31章 video元素与audio元素的基础知识

    NULL 博文链接:https://onestopweb.iteye.com/blog/2262307

    第32章 video元素与audio元素的常用属性

    NULL 博文链接:https://onestopweb.iteye.com/blog/2262308

    h5,video禁止拖动进度条,禁止快进

    利用jq简单控制h5视频播放进度条,让使用者不能快进,可以后退。原理是每500毫秒记录一次进度条时间,如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒,那么就让视频返回到上一个进度,因项目开发中对于视频...

    JS正则表达式的使用以video标签为例

    使用JS正则表达式,选取video元素的src属性的值,利用jQuery选取元素

    vue实现自定义H5视频播放器的方法步骤

    刚开始构思的时候考虑了一下功能的实现方式: 一是用原生的DOM操作,获取video元素后,用addEventListener来监听; 二是用vue的方式绑定事件监听; 最后图方便采用了两者结合的方式,但是总感觉有点乱, 打算后期再做一下...

    HTML5&CSS3网页制作:CSS控制视频的宽高.pptx

    video元素自身控制 01 通过元素自身属性控制 在HTML5中,经常会通过为video元素添加宽高的方式给视频预留一定的空间,这样浏览器在加载页面时就会预先确定视频的尺寸,为其保留合适的空间,使页面的布局不产生变化。...

    nginx-rtmp-module-vagrant:基于nginx-rtmp-module,ffmpeg和html video元素的HTTP实时流(HLS)服务器

    nginx-rtmp-module-vagrant:基于nginx-rtmp-module,ffmpeg和html video元素的HTTP实时流(HLS)服务器

    hugo-video:Hugo主题组件,可使用HTML video元素嵌入视频

    这主题组件提供了一个简码: video使用嵌入视频。 它带有英语,法语,德语和俄语本地化版本。 欢迎其他语言! 发送您的拉取请求。 特征 该简码使用雨果 Hugo 。 要显示的视频必须放在。 简码有一个必填参数:要...

    HTML5+CSS3 快速入门 前端 源代码.rar

    32.video元素与audio元素的基础知识20:10 33.video元素与audio元素的常用属性32:18 34.HTML5拖放22:41 35.CSS3简介04:11 36.CSS3新增的属性选择器22:17 37.结构性伪类选择器上28:52 38.结构性伪类选择器下21:00 39....

    videojs-contrib-ads:用于构建Video.js广告插件的工具

    广告播放后,即使广告在内容的video元素中播放,播放器状态也会自动恢复。 预加载广告加载时,内容会自动暂停,并显示加载微调框。 将触发,就好像广告不存在一样。 有关更多信息,请阅读上的文档。 广告服务器网址...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    5.1 使用audio和video元素 138 5.2 使用JavaScript脚本控制媒体播放 141 5.3 事件监听 144 5.4 track元素 146 5.5 本章小结 149 第6章 级联样式单与CSS选择器 150 6.1 样式单概述 151 6.2 CSS样式单的基本...

    HTML5 Video(视频)

    HTML5 规定了一种通过 video 元素来包含视频的标准方法。 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素.注意: Internet Explorer 8 或者更早的IE版本不支持

    HTML5高级程序设计

    3.1.4 audio元素和video元素的浏览器支持情况 56 3.2 使用html5 audio和video api 56 3.2.1 浏览器支持性检测 57 3.2.2 理解媒体元素 58 3.2.3 使用audio元素 62 3.2.4 使用video元素 63 3.2.5 进阶功能 68 ...

    完整版《HTML5高级程序设计》2

    3.1.4 audio元素和video元素的浏览器支持情况 56 3.2 使用HTML5 Audio和Video API 56 3.2.1 浏览器支持性检测 57 3.2.2 理解媒体元素 58 3.2.3 使用audio元素 62 3.2.4 使用video元素 63 3.2.5 进阶功能 68 3.3 小结...

    完整版《HTML5高级程序设计》4

    3.1.4 audio元素和video元素的浏览器支持情况 56 3.2 使用HTML5 Audio和Video API 56 3.2.1 浏览器支持性检测 57 3.2.2 理解媒体元素 58 3.2.3 使用audio元素 62 3.2.4 使用video元素 63 3.2.5 进阶功能 68 3.3 小结...

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    4.1.4 audio元素和video元素的浏览器支持情况 77 4.2 使用HTML5 Audio和Video API 78 4.2.1 浏览器支持性检测 79 4.2.2 可访问性 79 4.2.3 理解媒体元素 80 4.2.4 使用audio元素 85 4.2.5 使用video元素 86 ...

    完整版《HTML5高级程序设计》5

    3.1.4 audio元素和video元素的浏览器支持情况 56 3.2 使用HTML5 Audio和Video API 56 3.2.1 浏览器支持性检测 57 3.2.2 理解媒体元素 58 3.2.3 使用audio元素 62 3.2.4 使用video元素 63 3.2.5 进阶功能 68 3.3 小结...

    完整版《HTML5高级程序设计》3

    3.1.4 audio元素和video元素的浏览器支持情况 56 3.2 使用HTML5 Audio和Video API 56 3.2.1 浏览器支持性检测 57 3.2.2 理解媒体元素 58 3.2.3 使用audio元素 62 3.2.4 使用video元素 63 3.2.5 进阶功能 68 3.3 小结...

Global site tag (gtag.js) - Google Analytics