html5 视频播放

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="../js/jquery.min.js"></script>
  7.     <script type="text/javascript">
  8.         $().ready(function () {
  9.             $("#play").bind('click',function(){
  10.                $("#video")[0].play();
  11.             });
  12.             $("#pause").bind('click', function () {
  13.                 $("#video")[0].pause();
  14. //                $("#video")[0].currentTime+=10;   //快进10秒
  15. //                $("#video")[0].currentTime-=10;    //快退10秒
  16. //                $("#video")[0].playbackRate+=2;   // 播放速度+
  17. //                $("#video")[0].playbackRate=1;      //正常播放
  18. //                $("#video")[0].volume+=0.1; // 加音量
  19. //                $("#video")[0].muted=true; // 静音
  20. //                $("#video")[0].muted=false;// 取消静音
  21. //                $("#video")[0].webkitEnterFullscreen();  //webkit 全屏
  22. //                $("#video")[0].mozRequestFullScreen();   // firefox 全屏
  23.             });
  24.             $("#play2").bind('click',function(){
  25.                 $("#video")[0].playbackRate=3;
  26.             });
  27.         });
  28.     </script>
  29. </head>
  30. <body>
  31. <video id="video" width="400"  poster="../img/logo.png">
  32.     <source src="../video/piano.mp4" type="video/mp4"/>
  33. 你的浏览器不支持html5
  34. </video>
  35. <hr>
  36. <button id="play">播放</button><button id="pause">暂停</button>
  37. <button id="play2">快播</button>
  38. <hr/>
  39. autoplay 自动播放 （不推荐）
  40. loop 循环播放
  41. preload 是否等加载完再播放（不推荐）
  42. poster="../logo.png" 视频封面
  43.  
  44. <!--简单版-->
  45. <!--<video src="../vide/piano.mp4" controls="controls">
  46.     你的浏览器不支持html5
  47. </video>-->
  48. <hr/>
  49. 听歌：
  50. <audio src="../video/酸甜.mp3" controls="controls"></audio>
  51.  
  52. </body>
  53. </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. 一种透明效果的view

    设置这个view背景色: [UIColor colorWithRed: green: blue: alpha:0.3]; 效果如下:

  2. python numpy 教程

    http://blog.chinaunix.net/uid-21633169-id-4408596.html

  3. pthread_cancel

    #include <pthread.h> #include <stdio.h> #include<stdlib.h> #include <unistd.h&g ...

  4. int(11)最大长度是多少，MySQL中varchar最大长度是多少(转)

    int(11)最大长度是多少,MySQL中varchar最大长度是多少? int(11)最大长度是多少? 在SQL语句中int代表你要创建字段的类型,int代表整型,11代表字段的长度. 这个11代表 ...

  5. Office Web Apps资源

    http://www.cnblogs.com/poissonnotes/p/3277280.html#!comments http://www.cnblogs.com/poissonnotes/p/3 ...

  6. linux 的终端字体色和背景色的修改方法（三）

    除了在窗口下修改,配置文件中修改外,还可以用shell来修改,此处为B shell linux BASH shell下设置字体及背景颜色 类型:转载 这篇文章主要介绍了linux BASH shell ...

  7. iOS: FFMpeg编译和使用问题总结

    iOS: FFmpeg编译和使用问题总结 折磨了我近一周多时间的FFmpeg库编译问题终于解决了,必须得把这一段时间来遇到过的坑全写出来.如果急着解决问题,编译最新版本的FFmpeg库请直接看第二部分 ...

  8. 整理的dedecms标签大全,方便查找

    平时用dedecms开发经常会用到一些标签,特别是首页.栏目页.内容页,这些页面都会用到标签的调用,比如title.keywords.description.arclist.field.body等,为 ...

  9. =============Python安装与使用================

    用文本编辑器写Python程序,然后保存为后缀为.py的文件,就可以用Python直接运行这个程序了. Python的交互模式和直接运行.py文件有什么区别呢? 直接输入python进入交互模式,相当 ...

  10. 见招拆招：绕过WAF继续SQL注入常用方法

    Web Hacker总是生存在与WAF的不断抗争之中的,厂商不断过滤,Hacker不断绕过.WAF bypass是一个永恒的话题,不少基友也总结了很多奇技怪招.那今天我在这里做个小小的扫盲吧.先来说说 ...