最近看到很多有用的论坛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. Winsock 编程流程

    近期看了<Window程序设计>感觉在网络方面讲的不错,讲的非常通俗易懂.与大家一同交流 转载请注明出处:http://blog.csdn.net/u010484477谢谢^_^ 使用 W ...

  2. 我的Android学习之旅(转)

    去年大概在七月份的时候误打误撞接触了一阵子Android,之后由于工作时间比较忙,无暇顾及,九月份的时候自己空闲的时间比较多,公司相对来说加班情况没以前严重.开启了个人的Android学习之旅,初衷是 ...

  3. 第6本：《The Hunger Games》

    第6本:<The Hunger Games> 以前从未读过一本完整的英文小说,所有就在今年的读书目标中增加了一本英文小说,但在 头四个月内一直没有下定决定读哪一本.一次偶然从SUN的QQ空 ...

  4. EJBTimer 使用EJB提供的定时器

    一.说明 EJB提供的定时器有两种,自动定时器和自定义定时器,自动定时器设置使用简单但是扩展较为麻烦,自定义定时器有较好的扩展性. 下面的例子中是把两中方式放到了一个测试类中. 二.示例 import ...

  5. 利用泛型抽取Dao层，加事务注解问题（java.lang.Class cannot be cast to java.lang.reflect.ParameterizedType）

    想利用泛型抽取BaseDao层,简化操作时出现故障: @Transactional这个注解是能够继承的.于是就想写在抽取的BaseDao层上,让实现的类能够不用写@Transactional,就可开启 ...

  6. hash在Coreseek 中配置bigint

    304 $sphinxapi->SetSelect('id, domain_hash'); 304 $sphinxapi->SetConnectTimeout(3); 305 $sphin ...

  7. oracle 11g impdp时 报ORA-12899(转)

    源库ZHS16BGK,汉字在数据库存放的时候占用两个字节 目标库UTF8,汉字在数据库里存放的时候占用三个字节 由于字符集不同,导致现在数据库impdp的时候有些表的字段长度不够,出现ORA-1289 ...

  8. Linux下一个C（编程入门.h档，.c档，而路多文件的调用）

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/400/fill/I0 ...

  9. UML序列图总结(转)

    序列图主要用于展示对象之间交互的顺序. 序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸.横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线 ...

  10. UML用例图总结（转）

    用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. [用途]:帮助开发团队以一种可视化的方式理解系统的功能需求. 用例图所包含的元素如下: 1. ...