jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

原创 2014年06月21日 20:24:31
最近在论坛中看到了很多实用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>
看运行效果(手机上的全屏效果图):


非全屏效果图:

好的,就到这里了。这里用的是video-js.js框架。如果大家需要源码,请点击进行下载:http://download.csdn.net/download/xmt1139057136/7531669
如有不懂,请加qq群:135430763共同学习!



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xmt1139057136/article/details/32957663

HTML5开发手机App之:HTML5系统教程

通过案例进行详尽的讲解,浓缩HTML5开发APP之前端基础语法,快速掌握HTML5的开发方法,为进一步的深入学习打下基础。
  • 2016年02月03日 21:01

HTML5 标签audio添加网页背景音乐代码

html5  是 HTML 5 的新标签,定义声音,比如音乐或其他音频流。HTML 5 标签HTML5 audio让音乐东山再起HTML5 运用aduio标签打造音乐播放器 可以在开始标签和结束标签...
  • sunboy_2050
  • sunboy_2050
  • 2015-09-21 09:07:11
  • 86675

HTML5使用JavaScript控制<audio>音频的播放

1,下面是一个播放音乐的最简单样例 (controls属性告诉浏览器要有基本播放控件) 原文:HTML5 - 使用播放音频 2,预加载媒体文件 设置preload不同的...
  • kaikai4
  • kaikai4
  • 2016-06-28 15:50:21
  • 28065

iOS 将http%3A%2F%2F解析为URL

NSString *str = @"http%3A%2F%2Fmyimg.ifeng.com%2F200%2F22%2F8a941d71c4df48a5%2F1418632228%2F8a941d71...
  • worldzhy
  • worldzhy
  • 2014-12-15 17:37:53
  • 10928

de/encodeURI(Component)--"http%3A%2F%2Fwww.baidu.com%2Fasd%3Fa%3D123"

对于”http%3A%2F%2Fwww.baidu.com%2Fasd%3Fa%3D123”这种特殊字符被转义成16进制的字符串, 虽然知道”%3A”表示冒号(百分号”%”是转义符, 相当于正则当中的...
  • gong_zhe_511
  • gong_zhe_511
  • 2017-04-25 11:28:16
  • 3542

pyhon3模拟登录百度(2)—— 使用IE11理清百度登录内部逻辑和分析请求发送数据

依照思路来,第一步就是难点和重点,搞清楚了网页登录的内部逻辑,才能进行下一步的模拟登录。 这里,我的浏览器是IE11。因为已经看了一篇手把手教学分析登录逻辑的文章,所以这里写的要节省多了。 ...
  • abclixu123
  • abclixu123
  • 2014-10-12 08:19:00
  • 3324

html5tricks.com

http://www.html5tricks.com/ 这个网站有很多很炫的html5相关资料,mark一记。
  • mh245500
  • mh245500
  • 2015-02-15 14:20:16
  • 784

7款HTML5/CSS3应用新鲜出炉 功能强大实用 (www.html5tricks.com)

1、HTML5/CSS3发光文字 可自定义文字色彩 效果很赞 前几天我已经向大家分享了两款HTML5/CSS3文字特效,尤其是这款HTML5 Canvas字母文字颗粒动画 可设置重力感应,更是动感。...
  • maxiaokun55
  • maxiaokun55
  • 2014-03-14 08:56:29
  • 2085

html5播放器的示例代码

本次的分享是一个基于HTML5标签实现的一个自定义视频播放器。其中实现了播放暂停、进度拖拽、音量控制及全屏等功能。 效果预览 核心思路 我相信一定会有些没有接触过制作自定义播放器...
  • dangdaiwolong
  • dangdaiwolong
  • 2017-09-03 11:54:35
  • 1502

HTML5移动开发(5)——制作一个漂亮的视频播放器

在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的体验一下HTML5的优势,我们开始制作一个漂亮的视频播放器吧先别急,在开始制作之前先了解一下视频文件的基本知识。 一...
  • jdfkldjlkjdl
  • jdfkldjlkjdl
  • 2014-10-15 14:33:35
  • 5029
收藏助手
不良信息举报
您举报文章:jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
举报原因:
原因补充:

(最多只允许输入30个字)