最近看到很多有用的论坛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. Java 模拟队列(一般队列、双端队列、优先级队列)

    队列: 先进先出,处理类似排队的问题,先排的.先处理,后排的等前面的处理完了,再处理 对于插入和移除操作的时间复杂度都为O(1).从后面插入,从前面移除 双端队列: 即在队列两端都能够insert和r ...

  2. 陈一舟《情系人人》：先搞钱，再搞人才_DoNews-IT门户-移动互联网新闻-电子商务新闻-游戏新闻-风险投资新闻-IT社交网络社区

    陈一舟<情系人人>:先搞钱,再搞人才_DoNews-IT门户-移动互联网新闻-电子商务新闻-游戏新闻-风险投资新闻-IT社交网络社区 陈一舟<情系人人>:先搞钱,再搞人才

  3. python手记(46)

    #!/usr/bin/env python   # -*- coding: utf-8 -*- #http://blog.csdn.net/myhaspl   #code:myhaspl@qq.com ...

  4. c#控制台应用程序-“进入指定日期检查出星期几”

    这涉及一个算法: 基姆拉尔森计算公式 W= (d+2*m+3*(m+1)/5+y+y/4-y/100+y/400+1) mod 7 在公式中d表示日期中的日数.m表示月份数.y表示年数. 注意:在公式 ...

  5. Maven, Ivy, Grape, Gradle, Buildr, SBT, Leiningen, ant

    Maven, Ivy, Grape, Gradle, Buildr, SBT, Leiningen, ant

  6. mysql用户权限分配及主从同步复制

    赋予wgdp用户查询权限: grant select on wg_dp.* to 'wgdp'@'%' IDENTIFIED BY 'weigou123'; grant all privileges ...

  7. Android开发之Buidler模式初探结合AlertDialog.Builder解说

          什么是Buidler模式呢?就是将一个复杂对象的构建与它的表示分离,使得相同的构建过程能够创建不同的表示.Builder模式是一步一步创建一个复杂的对象,它同意用户能够仅仅通过指定复杂对象 ...

  8. 用python输出汉字字库

    问题1:如果我们知道汉字编码范围是0x4E00到0x9FA5,怎么从十六进制的编码转成人类可读的字呢? 问题2:怎么把unicode编码的字写入文件呢,假设直接用open()的话,会提示Unicode ...

  9. linux sort,uniq,cut,wc命令详解 （转）

    sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...

  10. SSO（Single Sign On）系列（一）--SSO简单介绍

    任何类型的站点,到达一定规模之后一定会存在这种问题:比方我们有N个系统.传统方式下我们就须要有N对不同的username和password,本来这些系统的开发都能为我们带来良好的效益,用户在用的时候并 ...