如何使你的网站占据优势,取决于你的功能和用户体验。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一起学习。
版权声明:本文博主原创文章,博客,未经同意不得转载。