最近看到很多有用的论坛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. 2014 Multi-University Training Contest 1 - J Rating

    题目链接: pid=4870">http://acm.hdu.edu.cn/showproblem.php?pid=4870 题目大意: 题意:一个人注冊两个账号,初始rating都是 ...

  2. IOC框架之一Autofac

    .NET领域最为流行的IOC框架之一Autofac 一.前言 Autofac是.NET领域最为流行的IOC框架之一,微软的Orchad开源程序使用的就是Autofac,Nopcommerce开源程序也 ...

  3. Redis集群明细文档（转）

    相信很多用过Redis的同学都知道,Redis目前版本是没有提供集群功能的,只能单打独斗.如果要实现多台Redis同时提供服务只能通过客户端自身去实现.目前根据文档已经看到Redis正在开发集群功能, ...

  4. NLP 苏图南 打破自我设限 突破自我—在线播放—优酷网，视频高清在线观看

    http://v.youku.com/v_show/id_XNTAyNDg3MTky.html?x

  5. LINUX设备驱动程序的注意事项（两）建设和执行模块

             <一>:设置測试系统 首先准备好一个内核源代码树,构造一个新内核,然后安装到自己的系统中.           <二>:HelloWorld模块 #inclu ...

  6. 《软件project》课程报告 —国土资源执法监察管理信息系统建模

    ***********************************************声明*************************************************** ...

  7. hdu 4007 Dave (2011年大连ACM网络赛)

    题意:给定正方形的边长 r ,在平面内寻找正方形可以圈住的点的最大的个数. 分析:先对点排序,然后固定一条边,再平移另一条垂直边,得到点的个数,最后比较大小即可. 注意:不包含正方形倾斜的情况! // ...

  8. What the difference between rebuild index and re-organize index?

    avg_fragmentation_in_percent value Corrective statement > 5% and < = 30% ALTER INDEX REORGANIZ ...

  9. 2-07. 素因子分解（20） （ZJUPAT 数学）

    题目链接:http://pat.zju.edu.cn/contests/ds/2-07 给定某个正整数N,求其素因子分解结果,即给出其因式分解表达式 N = p1^k1 * p2^k2 *-*pm ^ ...

  10. python可变参数调用函数的问题

    已使用python实现的一些想法,近期使用python这种出现的要求,它定义了一个函数,第一种是一般的参数,第二个参数是默认,并有可变参数.在第一项研究中python时间,不知道keyword可变参数 ...