视频标签video简易控制交互的范例
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button οnclick="playPause()">播放/暂停</button>
<button οnclick="makeBig()">放大</button>
<button οnclick="makeSmall()">缩小</button>
<button οnclick="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>
视频格式与浏览器的支持
当前, <video> 元素支持三种视频格式: MP4, WebM, 和 Ogg:
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
我的视频应用类原创文章
- 酷播云免费视频二维码的完整使用教程(适合小企业做微信视频宣传)
- 视频二维码的适用场景
- 微信公众号直播有哪些不一样的玩法?
- 微信视频直播如何做收费直播(如何做付费的微信直播)图文教程
- 说说视频编码格式、视频码率、视频帧率、分辨率的概念
- 原创教程:带ppt课件和讲师画面的教学视频录制完整教程
- 如何做电视节目的视频直播(电视台节目直播)
- 做视频直播时如何测试本地网络的上行带宽(网速测试)
- usb摄像头做教学直播实现pc和手机都可以在线观看教程
- 微信公众号直播有哪些不一样的玩法?
- 微信视频直播如何做收费直播(如何做付费的微信直播)图文教程
- 说说视频编码格式、视频码率、视频帧率、分辨率的概念
- 原创教程:带ppt课件和讲师画面的教学视频录制完整教程
- 如何做电视节目的视频直播(电视台节目直播)
- 做视频直播时如何测试本地网络的上行带宽(网速测试)
- usb摄像头做教学直播实现pc和手机都可以在线观看教程
- 微信公众号直播有哪些不一样的玩法?
- 如何做电脑游戏桌面录屏直播实现手机直接观看
- 免费视频存储平台(微云、百度网盘、谷歌硬盘、酷播云)的截图对比
- 云课堂直播功能介绍,更贴合在线教育、企业内训的场景应用
- 基于微信小程序做直播的截图(微信小程序发起视频直播)
- 在线教学场景下 讲师们做PPT课件直播的一些介绍
- FMS/wowza/red5/SRS流媒体服务器产品对比