最近看到很多有用的论坛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. aix 下 实现goldengate 随os启动而自己主动启动的脚本

    aix 下 实现goldengate 随os启动而自己主动启动的脚本: 1.用oracle用户建立/u01/info.txt,文件内容例如以下: sh date start mgr 2.chmod + ...

  2. 【C语言疯狂讲义】（八）C语言一维数组

    1.数组的基本概念: 同样类型    若干个     有序 由若干个同样类型的数据组成的有序的集合 有序:存储地址连续 下标连续 数组名:用来存放数组首地址的变量 数组元素:构成数组的每个数据 数组的 ...

  3. AngularJS是为了克服HTML在构建应用上的不足而设计的

    AngularJS中文网:http://www.apjs.net/ 简介   AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构 ...

  4. 实习第一天之数据绑定：<%#Eval("PartyName")%>'

    1.asp:HyperLink ID="Link" runat="server" Target="_blank" Text='<%#E ...

  5. HttpApplication处理对象与HttpModule处理模块

    HttpApplication处理对象与HttpModule处理模块 (第三篇) 一.HttpApplication对象简述 在HttpRuntime创建了HttpContext对象之后,HttpRu ...

  6. c++对象指针-01（转载）

    1.指向对像的指针在建立对像时,编译系统会为每一个对像分配一定的存储空间,以存放其成员,对像空间的起始地址就是对像的指针.可以定义一个指针变量,用来存和对像的指针.如果有一个类:class Time{ ...

  7. Android数据库高手秘籍(五)——LitePal的存储操作

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/39345833 经过前面几篇文章的学习,我们已经把LitePal的表管理模块的功能都 ...

  8. JSP与ASP.PHP的比較

    眼下,最经常使用的三种动态网页语言为:ASP(Active Server Pages).PHP(HyperText Preprocessor)及JSP(Java Server Pages). JSP与 ...

  9. HDU1194_Beat the Spread!

    Beat the Spread! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. LDAPserver的安装

    源代码安装,以root用户进行 由于:由于openldap须要用Berkeley DB来存放数据,所以要先安装所以需先安装Berkeley DB 4.2.52数据库. 一 安装Berkeley DB ...