标签：html5 html5手机高级功能开发 html5视频播放器 html5音乐播放器 html5中video的详细讲解
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能，大部分都在寻找答案。因此我就在这里做一个demo，供大家相互学习。html5开发越来越流行了，而对于视频这一块也是必不可少的一部分。如何让你的网站占据优势，就要看你的功能和用户体验了。html5对video还是做了很多优惠的东西，我们使用起来很得心应手。<!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>看运行效果(手机上的全屏效果图)：
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器,布布扣,bubuko.com
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
标签：html5 html5手机高级功能开发 html5视频播放器 html5音乐播放器 html5中video的详细讲解
原文地址：http://blog.csdn.net/xmtblog/article/details/32957663
