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

如何使你的网站占据优势，取决于你的功能和用户体验。html5对video做了非常多优惠的东西。我们使用起来非常得心应手。

在过去 flash 是网页上最好的解决视频的方法。截至到眼下还算是主流。像那些优酷之类的视频站点、虾米那样的在线音乐站点。仍然使用 flash 来提供播放服务。可是这样的状况将会随着 HTML5 的发展而改变。就视频而言。HTML5 新增了 video 来实如今线播放视频的功能。

使用 HTML5 的 video 能够非常方便的使用 JavaScript 对视频内容进行控制等等。功能十分强大，同一时候代码比較少加快载入速度。此外跨平台性比較好，特别是一些平板、手机等。比如苹果公司的产品不支持 flash 仅支持 HTML5 中的 video 功能。

HTML5 的兼容性问题尽管眼下是个硬伤。但这仅仅是时间的问题。好吧废话少说，看代码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>伪专家html5视频播放器,音乐播放器</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<link href="video-js.css" rel="stylesheet" type="text/css">

<script src="video.js"></script>

<script>

   videojs.options.flash.swf = "video-js.swf";

</script>

</head>

<body>

<div data-role="page">

  <div data-role="header" data-position="fixed">

    <h1>伪专家html5视频播放器,音乐播放器</h1>

  </div>

  <div data-role="content">

    <p><b>如有疑问：请加qq群135430763，共同学习！！

！

</b></p>

    <p><b>如有疑问：请加qq群135430763，共同学习。！！</b></p>

  	 <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"

      poster="herman.png"

      data-setup="{}">

    <source src="herman.mp4" type='video/mp4' />

    <source src="herman.webm" type='video/webm' />

    <source src="herman.ogv" type='video/ogg' />

    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>

    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>

  </video>

  </div>

  <div data-role="footer" data-position="fixed">

    <h1>伪专家html5视频播放器,音乐播放器</h1>

  </div>

</div>

</body>

</html>

看执行效果(手机上的全屏效果图)：



watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveG10YmxvZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" height="290" width="524" alt="">

非全屏效果图：



好的，就到这里了。

这里用的是video-js.js框架。假设大家须要源代码，请点击进行下载：http://download.csdn.net/download/xmt1139057136/7531669

如有不懂。请加qq团：135430763一起学习。

版权声明：本文博主原创文章，博客，未经同意不得转载。

jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器的更多相关文章

  1. 与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成

    原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...

  2. HTML5 audio标签自制音乐播放器

    相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...

  3. html5新媒体播放器标签video、audio 与embed、object

    html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...

  4. Plyr – 简单，灵活的 HTML5 媒体播放器

    Plyr 是一个简单的 HTML5 媒体播放器,包含自定义的控制选项和 WebVTT 字幕.它是只支持现代浏览器,轻量,方便和可定制的媒体播放器.还有的标题和屏幕阅读器的全面支持. 在线演示      ...

  5. Android播放器推荐：可以播放本地音乐、视频、在线播放音乐、视频、网络收音机等

    下载链接:http://www.eoeandroid.com/forum.php?mod=attachment&aid=MTAxNTczfGMyNjNkMzFlfDEzNzY1MzkwNTR8 ...

  6. 一个开源音乐播放器，低仿QQ音乐！

    有暇,弄了个音乐播放器,页面效果整体上参考了QQ音乐,相关API使用了易源数据提供的相关接口(https://www.showapi.com/api/lookPoint/213),在此表示感谢.先来看 ...

  7. 删除Win10资源管理器中的3D对象/音乐/视频文件夹

    Win10如何删除资源管理器中的3D对象/音乐/视频等文件夹?使用Win10系统的用户都知道,打开此电脑之后,资源管理上面会显示文档/音乐/视频等7个文件夹,一些用户认为很少使用到它们,想要除之而后快 ...

  8. MediaPlayer音乐播放器、上一首、下一首、播放、停止、自动下一首、进度条

    本文介绍MediaPlayer的使用.MediaPlayer可以播放音频和视频,另外也可以通过VideoView来播放视频,虽然VideoView比MediaPlayer简单易用,但定制性不如用Med ...

  9. Movist for Mac(高清媒体播放器)v2.0.7中文特别版

    Movist for Mac中文破解版是目前Mac平台上最好用的视频播放器,功能强大简单好用.movist mac版拥有美观简洁的用户界面,提供多种功能,支持视频解码加速高品质的字幕,全屏幕浏览,是与 ...

随机推荐

  1. Andriod中绘(画)图----Canvas的使用具体解释

    转载请注明出处:http://blog.csdn.net/qinjuning     因为在网络上找到关于Canvas的使用都比較抽象,或许是我的逻辑思维不太好吧,总是感觉理解起来比較困难, 尤其是对 ...

  2. MVC数据验证使用小结

    原文:MVC数据验证使用小结 描述:MVC数据验证使用小结 内容:display,Required,stringLength,Remote,compare,RegularExpression 本人最近 ...

  3. Java提供的enum详解

    今天第一天看<<Effective Java>>,看了第六章的第一条就是全书的第30条--用enum代替int常量. 1.第一次知道原来enum也可以像class那样拥有成员函 ...

  4. Smarty模板引擎的使用

    Smarty模板引擎的使用 Smarty是PHP中一个基于MVC模式的模板引擎. Download: http://www.smarty.net/download   特点 1.  最快速度的程序开发 ...

  5. 使用Google Roads API抓取道路信息（java实现）

    Google Roads API提供了强大的道路获取接口,用户仅仅需调用对应的API就能够获取对应区域的道路坐标以及道路的限速信息. 详细的调用方法例如以下: https://roads.google ...

  6. ajax基本概念，方法

    ajax    Asynchronous javascript and xml异步的 javascript and XMLajax 是一门在不刷新网页的情况下,与服务器进行交互更新部分网页的技术: 传 ...

  7. mysql xtrabackup增量备份

    mysql 增量备份策略 周一全备,其他增量备份,根据业务需要,设定保留日期,如保留一月. 增量备份步骤; 1 创建全备 2 根据全备目录,创建增量备份 3 第二次增量备份根据第一次增量备份目录,依次 ...

  8. [置顶] quartznet任务调度和消息调度（JAVA与C#版对比）

    quartznet任务调度和消息调度 1.  作用 自动执行任务. 2.  下载地址 NET版本 JAVA版本 1下载 http://quartznet.sourceforge.net/downloa ...

  9. 用 Apache James 搭建邮件服务器来收发邮件实践（一）(转)

    Apache James 简称 James, 是 Java Apache Mail Enterprise Server的缩写.James 是100%基于Java的电子邮件服务器.它是一种独立的邮件服务 ...

  10. codeforece Round#311 BCDE

    B题 给我们n,m ,  m表示茶壶的容量 接下来2*n个数字,表示茶杯的容量,将这些茶杯分给n个男孩和n个女孩 可以倒x毫升的茶水给每个女孩,那么就要倒2x毫升的茶水给男孩,当然了,茶杯要装的下,且 ...