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 的兼容性问题虽然目前是个硬伤，但这只是时间的问题。好吧废话少说，看代码：

[html] view plain copy print ?

<!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">
<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>

<!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

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

html原生音频播放器倍速,HTML5倍数功能视频播放器（加速2倍，1.5倍播放）
HTML5倍数功能视频播放器(加速2倍,1.5倍播放) 倍数功能视频播放器的应用: 培训场景,教育教学场景下,可以倍速观看视频,比如1.5倍,2倍的速度观看视频,可以更快速的看完课程,节省时间. va ...
html5带倍速功能的视频播放器（加速2倍，1.5倍播放）
阿酷TONY 采用第三方云视频平台 HTML5倍数功能视频播放器(加速2倍,1.5倍播放) 倍数功能视频播放器的应用: 培训场景,教育教学场景下,可以倍速观看视频,比如1.5倍,2倍的速度观看视频, ...
html5 无插件视频播放器,多功能流媒体播放器网页无插件直播EasyPlayer.js如何实现播放完自动循环播放...
原标题:多功能流媒体播放器网页无插件直播EasyPlayer.js如何实现播放完自动循环播放 EasyPlayer-Android播放器是一款可针对RTSP.RTMP.RTSP&RTMP协议进 ...
7款高颜值HTML5播放器：让你的音乐有声有色
原文:http://www.codeceo.com/article/7-cool-html5-player.html 这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器 ...
html5 audio音乐播放，循环播放等9款播放器
说明随着HTML5越来越流行,越来越规范,音频播放支持和兼容改的平台越来越多,这里找到HTML5 通过 audio 元素来提供在网页中嵌入音频的标准方法,下面这9款 HTML5 音频播放器都是基于 ...
与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成...
原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页] [源码下载] 与众不同 wi ...
html音乐播放器样式,html5扁平化mp3音乐播放器样式代码
特效描述:html5 扁平化mp3 音乐播放器样式.扁平风格的简易的mp3音乐播放器样式代码.html5 mp3音乐播放器代码结构 1. 引入JS 2. HTML代码 0:00 0:00 'use ...
html5播放器源码自己添加音乐,HTML5 audio标签打造属于自己的音乐播放器
最近学习了HTML5中的Audio标签,学习他的最好方式当然是实践,于是就自己写了一个.那就直接上演示链接吧 http://htmlpreview.github.io/?https://github. ...
酷狗html5排行,轻享音乐酷狗全新HTML5播放器低调发布
近日老牌数字音乐厂商酷狗音乐推出了基于HTML5的手机端播放器,跨平台使用,且无需安装,手机浏览器输入相应网址(m.kugou.com)即可实现音频播放. 酷狗html5播放器主界面这是目前国内第一 ...

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

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

最新文章

热门文章