watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/html">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<video id="video" width="500" height="500" controls>

    <source src="movie.mp4" type="video/mp4">

    <source src="movie.mp4" type="video/ogg">

    您的浏览器不支持 HTML5 video 标签。

</video>

</br></br>

<button onclick="playPause(this)">播放</button>

<button onclick="forward()">快进5秒</button>

<button onclick="rewind()">快退5秒</button>

<button onclick="mute(this)">静音</button>

<button onclick="accelerate()">加速3倍播放</button>

<button onclick="decelerate()">减速3倍播放</button>

<button onclick="normal()">正常播放</button>

<button onclick="upperVolume()">提高声音</button>

<button onclick="lowerVolume()">减少声音</button>

<script type="text/javascript">

    var video = document.getElementById('video');

    function playPause(obj) {

        if (video.paused) {

            video.play();

            obj.innerHTML = "暂停";

        } else {

            video.pause();

            obj.innerHTML = "播放";

        }

    }

    function forward() {

        video.currentTime += 5;

    }

    function rewind() {

        video.currentTime -= 5;

    }

    function mute(obj) {

        if (video.muted) {

            video.muted = false;

            obj.innerHTML = "静音";

        } else {

            video.muted = true;

            obj.innerHTML = "开声";

        }

    }

    function accelerate() {

        video.playbackRate = 3;

    }

    function decelerate() {

        video.playbackRate = 1 / 3;

    }

    function normal() {

        video.playbackRate = 1;

    }

    function upperVolume() {

        video.volume += 0.2;

    }

    function lowerVolume() {

        video.volume -= 0.2;

    }

</script>

</body>

</html>

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.

注意: Internet Explorer 8 或者更早的IE版本号不支持 <video> 元素。

html5-video视频播放的更多相关文章

  1. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  2. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

  3. Chrome/Chromium HTML5 video 视频播放硬件加速

    Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...

  4. HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速

    Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some ...

  5. 移动端 HTML5 <video> 视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  6. [转]移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  7. 微信 HTML5 VIDEO 视频播放解决方案

    原文链接:https://www.jianshu.com/p/e4573acf6564 webkit-playsinline && playsinline="true&quo ...

  8. 借用网上大神的一些知识，html5 video 视频播放都兼容（Android，iOS，电脑）

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  9. Web视频播放 之 【HTML5 Video标签】

    一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...

  10. Html5 Video 实现方案

    来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...

随机推荐

  1. EOJ 3265 七巧板

    模拟. 先判断三边形和四边形的个数. 然后判断$5$个三角形是否都是等腰直角三角形. 然后判断$5$个等腰直角三角形比例是否符合要求. 然后寻找正方形.判断比例是否符合要求. 最后判断四边形是否符合要 ...

  2. Xcode_7_GM_seed.dmg下载

    Xcode_7_GM_seed.dmg下载     Xcode_7_GM_seed.dmg  免费下载链接: http://pan.baidu.com/s/1pJ7oGAZ 密码: y5bx

  3. 2017/11/20 Leetcode 日记

    2017/11/14 Leetcode 日记 442. Find All Duplicates in an Array Given an array of integers, 1 ≤ a[i] ≤ n ...

  4. 【tarjan+拓扑】BZOJ3887-[Usaco2015 Jan]Grass Cownoisseur

    [题目大意] 给一个有向图,然后选一条路径起点终点都为1的路径出来,有一次机会可以沿某条边逆方向走,问最多有多少个点可以被经过?(一个点在路径中无论出现多少正整数次对答案的贡献均为1) [思路] 首先 ...

  5. 一文了解JVM全部垃圾回收器，从Serial到ZGC

    <对象搜索算法与回收算法>介绍了垃圾回收的基础算法,相当于垃圾回收的方法论.接下来就详细看看垃圾回收的具体实现. 上文提到过现代的商用虚拟机的都是采用分代收集的,不同的区域用不同的收集器. ...

  6. Problem G: 切煎饼

    Description 王小二自夸刀工不错,有人放一张大的圆煎饼在砧板上,问他:饼不允许离开砧板,切100刀最多能切多少块? Input 多组测试数据,每组输入1个整数,代表切的刀数 Output 每 ...

  7. 20172333 2017-2018-2 《Java程序设计》第11周学习总结

    20172333 2017-2018-2 <Java程序设计>第11周学习总结 教材学习内容 对于Android Studio的安装以及对安卓的一些基本组成,比如说四大组件Acticity ...

  8. noip200807传纸条

    试题描述: 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的 ...

  9. python开发_glob

    ''' 在python中,glob模块是用来查找匹配的文件的 在查找的条件中,需要用到Unix shell中的匹配规则: * : 匹配所所有 ? : 匹配一个字符 *.* : 匹配如:[hello.t ...

  10. Codeforces Beta Round #4 (Div. 2 Only) B. Before an Exam dp

    B. Before an Exam 题目连接: http://www.codeforces.com/contest/4/problem/B Description Tomorrow Peter has ...