jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛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移动视频播放器的更多相关文章
- 与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成
原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...
- HTML5 audio标签自制音乐播放器
相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...
- html5新媒体播放器标签video、audio 与embed、object
html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...
- Plyr – 简单，灵活的 HTML5 媒体播放器
Plyr 是一个简单的 HTML5 媒体播放器,包含自定义的控制选项和 WebVTT 字幕.它是只支持现代浏览器,轻量,方便和可定制的媒体播放器.还有的标题和屏幕阅读器的全面支持. 在线演示 ...
- Android播放器推荐：可以播放本地音乐、视频、在线播放音乐、视频、网络收音机等
下载链接:http://www.eoeandroid.com/forum.php?mod=attachment&aid=MTAxNTczfGMyNjNkMzFlfDEzNzY1MzkwNTR8 ...
- 一个开源音乐播放器，低仿QQ音乐！
有暇,弄了个音乐播放器,页面效果整体上参考了QQ音乐,相关API使用了易源数据提供的相关接口(https://www.showapi.com/api/lookPoint/213),在此表示感谢.先来看 ...
- 删除Win10资源管理器中的3D对象/音乐/视频文件夹
Win10如何删除资源管理器中的3D对象/音乐/视频等文件夹?使用Win10系统的用户都知道,打开此电脑之后,资源管理上面会显示文档/音乐/视频等7个文件夹,一些用户认为很少使用到它们,想要除之而后快 ...
- MediaPlayer音乐播放器、上一首、下一首、播放、停止、自动下一首、进度条
本文介绍MediaPlayer的使用.MediaPlayer可以播放音频和视频,另外也可以通过VideoView来播放视频,虽然VideoView比MediaPlayer简单易用,但定制性不如用Med ...
- Movist for Mac(高清媒体播放器)v2.0.7中文特别版
Movist for Mac中文破解版是目前Mac平台上最好用的视频播放器,功能强大简单好用.movist mac版拥有美观简洁的用户界面,提供多种功能,支持视频解码加速高品质的字幕,全屏幕浏览,是与 ...
随机推荐
- Spring集成XFire开发WebService
Spring是眼下最流行的JavaEE Framework,可是使用Spring的Spring-WS开发WebService却十分繁琐.XFire是一个简化WebService开发的开源项目.通过Sp ...
- fzu2150（bfs）
题目链接:http://acm.fzu.edu.cn/problem.php?pid=2150 题意:在任意两处点火,求最短时间烧光所有草堆. 分析:由于n,m比较小,将所有草堆坐标记录下来,然后暴力 ...
- redis加入到Windows 服务
1.cmd命令 安装命令: redis-server.exe --service-install redis.windows.conf --loglevel verbose 卸载命令: redi ...
- Android Studio使用心得 - 简单介绍与环境配置
FBI Warning:欢迎转载,但请标明出处:http://blog.csdn.net/codezjx/article/details/38544823,未经本人允许请勿用于商业用途.感谢支持! 关 ...
- extjs_11_mvc模式
1.非mvc模式 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I ...
- Knockout应用开发指南 第八章：简单应用举例（2）
原文:Knockout应用开发指南 第八章:简单应用举例(2) 5 Control types 这个例子,对view model没有什么特殊的展示,只是展示如何绑定到各种元素上(例如,select ...
- Tomcat6 Session建立机制简要
底: 测试部门做压力测试, 结果没多久新闻,出现OutOfMemory. 查找原因,通过监视工具,查找StandardSession(org.apache.catalina.session.Stan ...
- pygame系列_箭刺Elephant游戏
这个游戏原名为:Chimp,我们可以到: http://www.pygame.org/docs/tut/chimp/ChimpLineByLine.html 获取到源码和详细的源码讲解 下面是我对游戏 ...
- CSS之box-sizing的用处简介
前几天才发现有 box-sizing 这么个样式属性.研究了一番感觉非常有意思, 通过指定容器的盒子模型类型,达到不同的展示效果 比如:当一个容器宽度定义为 width:100%; 之后.假设再添加 ...
- Redhat 6.3中syslog信息丢失
我们採用Linux的syslog来记录产品的debug log. 调用当中的一个可运行文件.运行完命令之后,查看debug log的信息,竟然从某一条log之后的log都丢失了.多次尝试后,发现每次都 ...