html5 视频播放

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript">

        $().ready(function () {

            $("#play").bind('click',function(){

               $("#video")[0].play();

            });

            $("#pause").bind('click', function () {

                $("#video")[0].pause();

//                $("#video")[0].currentTime+=10;   //快进10秒

//                $("#video")[0].currentTime-=10;    //快退10秒

//                $("#video")[0].playbackRate+=2;   // 播放速度+

//                $("#video")[0].playbackRate=1;      //正常播放

//                $("#video")[0].volume+=0.1; // 加音量

//                $("#video")[0].muted=true; // 静音

//                $("#video")[0].muted=false;// 取消静音

//                $("#video")[0].webkitEnterFullscreen();  //webkit 全屏

//                $("#video")[0].mozRequestFullScreen();   // firefox 全屏

            });

            $("#play2").bind('click',function(){

                $("#video")[0].playbackRate=3;

            });

        });

    </script>

</head>

<body>

<video id="video" width="400"  poster="../img/logo.png">

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

你的浏览器不支持html5

</video>

<hr>

<button id="play">播放</button><button id="pause">暂停</button>

<button id="play2">快播</button>

<hr/>

autoplay 自动播放 （不推荐）

loop 循环播放

preload 是否等加载完再播放（不推荐）

poster="../logo.png" 视频封面

<!--简单版-->

<!--<video src="../vide/piano.mp4" controls="controls">

    你的浏览器不支持html5

</video>-->

<hr/>

听歌：

<audio src="../video/酸甜.mp3" controls="controls"></audio>

</body>

</html>

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

  1. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  2. HTML5视频播放

    1.检测浏览器是否支持html5视频播放 <!doctype html> <html> <head> <meta charset="utf-8&qu ...

  3. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  4. HTML5视频播放插件 video.js介绍

    video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/    git& ...

  5. html5视频播放器 二 （功能实现及播放优化）

    样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了. /* *CoolPlay视频播放器 * 2016年8月1日 * 627314658@qq.com * */ @font-f ...

  6. html5视频播放器 一 （改写默认样式）

    一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等 先看看效果 是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...

  7. html5视频播放插件

    对于HTML5提供的新特性,给前端开发者带来了巨大的激情与动力,减轻了开发者的代码累赘,大大提高了网站性能以及网页的渲染效果.对于低版本的浏览器,由于生产厂商的原因,许多PC端低版本的浏览器还不兼容H ...

  8. html5 视频播放插件

    HTML5中加入了浏览器非常友好的标签 <video> ,这个标签非常的厉害,它可以不依靠falsh播放器,在网页中播放视频,目前W3C提供的video只支持mp4,ogg,webm三种视 ...

  9. html5视频播放解决方案

    关键词:html5  nativeapp webapp mp4 H.264 html5没学习之前总觉的很神秘.近期通过学习和研究html5有点成果,特总结分享给大家.众所周知应用开发分两种:一是原生的 ...

随机推荐

  1. UVa OJ 140 - Bandwidth (带宽)

    Time limit: 3.000 seconds限时3.000秒 Problem问题 Given a graph (V,E) where V is a set of nodes and E is a ...

  2. ios 关键字 IB_DESIGNABLE IBInspectable 尝鲜

    每次都用代码定义一个属性,然后在viewDidLoad中再去设置这个属性,最常见的就是什么圆角,描边的, 现在终于可以直接像系统的属性一样在界面上设定了 界面上修改你的属性,减少代码压力

  3. 自定义NSLog无时间

    #define SXLog(FORMAT, ...) fprintf(stderr,"file --\t%s\nline --\t%d\nmethd --\t%s\noutput --\t\ ...

  4. Get value from agent failed: cannot connect to [[192.168.186.130]:10050]: [113]No route to host

    客户端配置zabbix-agent 后,网页端出现Get value from agent failed: cannot connect to [[192.168.186.130]:10050]: [ ...

  5. 深入浅出 - Android系统移植与平台开发（五）- 编译Android源码（转）

    2.3编译Android源码 Android源码体积非常庞大,由Dalvik虚拟机.Linux内核.编译系统.框架代码.Android定制C库.测试套件.系统应用程序等部分组成,在编译Android源 ...

  6. Windows下文件的所有和权限

    跟linux不同, 在linux下 ,文件的所有者,就拥有对文件的所有读写执行的权限, 而windows, 文件的所有者不一定对文件拥有所有的权限, 场景: 要对系统文件(windows\system ...

  7. windows关机命令

    选择“开始→运行”:1.输入“at 22:00 Shutdown -s”,这样,到了22点电脑就会出现“系统关机”对话框,默认有30秒钟的倒计时并提示你保存工作.2.输入 “Shutdown.exe ...

  8. 类型安全且自动管理内存的返回 std::string 的 sprintf 实现

    在这篇博文里,我提到了一个例子,说的是使用C++实现类型安全的printf.这个例子很惊艳,但是在我写程序的时候,并非那么"迫切"地需要它出现在我的工具箱中,因为它并不比普通的pr ...

  9. Git+Gradle+Eclipse构建项目

    步骤: 1.安装好Git.解压gradle-2.14.zip免安装文件: 2.用SourceTree将GitLab上的项目拉取下来: 3.打开eclipse->Import->Gradle ...

  10. 混合应用中的javascript实践

    混合应用中的javascript实践 混合应用(hybird app) 在几年前便进入大众视野,近来更是越发风生水起,深受人民群众的喜爱. 目录 概念 什么是混合应用 混合方式 交互 方法注入 参数传 ...