专栏首页业余草jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为什么有人说 Redis 的 set 命令是一个危险命令?

    原文链接:https://redislabs.com/

    业余草
  • jQuery Mobile 自定义标签

    最近在规划产品国际化的需求,涉及到PC Web,移动Web,和各app。设计了多个版本的移动Web均不理想。 由于移动Web采...

    业余草
  • jQuery Mobile图片轮转轮播

    最近一直很忙,刚抽出一点时间,来看了一下camera,非常好用,这里分享一下,与大家共勉!

    业余草
  • 如何在SAP WebClient UI里使用jChartFX

    In my blog CRM One Order statistic tool I develop a small tool to print out the ...

    Jerry Wang
  • CSS实现垂直居中布局

    首先将<html>与<body>的高度设置为100%(为演示父元素不定宽高的效果),并清除<body>的默认样式

    WindrunnerMax
  • jQuery中排除指定元素,同时选择剩下的所有元素

    场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

    菩提树下的杨过
  • AntUI文字书写范例(util/writing)

    爱知汇
  • Vue里v-for循环双层数组

    wePanda
  • 3.绑定属性、绑定html、绑定class、绑定style

    玩蛇的胖纸
  • 短视频商城源码,两种方式实现点击出现弹窗显示

    yunbaokeji柯基

扫码关注云+社区

领取腾讯云代金券