请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

切换风格 注册 找回密码

html5源码-html5教程网


查看: 36842|回复: 43

html5视频播放器

[复制链接]

23

主题

0

听众

58

积分

版主

Rank: 7Rank: 7Rank: 7

贡献
0
金钱
13

社区QQ达人

发表于 2014-6-22 10:33:11 |显示全部楼层
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 的兼容性问题虽然目前是个硬伤,但这只是时间的问题。好吧废话少说,看代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>html5教程网</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  8. <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  9. <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  10. <link href="video-js.css" rel="stylesheet" type="text/css">
  11. <script src="video.js"></script>
  12. <script>
  13.    videojs.options.flash.swf = "video-js.swf";
  14. </script>
  15. </head>
  16. <body>
  17. <div data-role="page">
  18.   <div data-role="header" data-position="fixed">
  19.     <h1>伪专家html5视频播放器,音乐播放器</h1>
  20.   </div>

  21.   <div data-role="content">
  22.     <p><b>如有疑问:请加qq群135430763,共同学习!!!</b></p>

  23.     <p><b>如有疑问:请加qq群135430763,共同学习!!!</b></p>
  24.            <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
  25.       poster="herman.png"
  26.       data-setup="{}">
  27.     <source src="herman.mp4" type='video/mp4' />
  28.     <source src="herman.webm" type='video/webm' />
  29.     <source src="herman.ogv" type='video/ogg' />
  30.     <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>
  31.     <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
  32.   </video>
  33.   </div>

  34.   <div data-role="footer" data-position="fixed">
  35.     <h1>伪专家html5视频播放器,音乐播放器</h1>
  36.   </div>
  37. </div>
  38. </body>
  39. </html>
复制代码
看运行效果(手机上的全屏效果图):
非全屏效果图:
好的,就到这里了。这里用的是video-js.js框架。


源码下载:
游客,如果您要查看本帖隐藏内容请回复



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

0

主题

0

听众

45

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2014-6-22 10:34:09 |显示全部楼层
占坑编辑ing
回复

使用道具 举报

0

主题

0

听众

48

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2014-6-23 01:01:48 |显示全部楼层
支持,楼下的跟上哈~
回复

使用道具 举报

4

主题

0

听众

50

积分

注册会员

Rank: 2

贡献
0
金钱
3
发表于 2014-6-23 13:19:15 |显示全部楼层
这么强,支持楼主,佩服
回复

使用道具 举报

0

主题

0

听众

49

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2014-6-24 16:14:39 |显示全部楼层
边撸边过
回复

使用道具 举报

0

主题

0

听众

45

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2014-6-25 11:46:07 |显示全部楼层
是爷们的娘们的都帮顶!大力支持
回复

使用道具 举报

0

主题

0

听众

42

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2014-6-25 13:41:23 |显示全部楼层
无论是不是沙发都得回复下
回复

使用道具 举报

2

主题

0

听众

51

积分

注册会员

Rank: 2

贡献
0
金钱
2
发表于 2014-6-30 23:33:30 |显示全部楼层
占位编辑
回复

使用道具 举报

0

主题

0

听众

567

积分

高级会员

Rank: 4

贡献
0
金钱
523
发表于 2014-7-1 15:00:21 |显示全部楼层
介是神马?!!
回复

使用道具 举报

2

主题

0

听众

46

积分

新手上路

Rank: 1

贡献
0
金钱
2
发表于 2014-7-2 06:08:58 |显示全部楼层
介是神马?!!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆



Archiver|手机版|     

HTML5教程网 Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部