jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器-阿里云开发者社区

开发者社区> 业余草> 正文

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

简介: 最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案。因此我就在这里做一个demo,供大家相互学习。html5开发越来越流行了,而对于视频这一块也是必不可少的一部分。如何让你的网站占据优势,就要看你的功能和用户体验了。html5对video还是做了很多优惠的东西,我们使用起来很得心应手。<br> 在过去 flash 是网页上最好的解决视频的方法,截至到目前
+关注继续查看
最近在论坛中看到了很多实用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
如有不懂,请加qq群:135430763共同学习!



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何用C#进行Winform MP3播放器开发
总结一下,下午半天进行的MP3播放器的开发:  首先,新建一个解决方案:命名MP3solution,设置FormBorderStyle为None,即上面的图标,最大化最小化按钮隐藏,但如图所示还有最大化关闭按钮,这时自己添加的两个PictureBox控件,下面的暂停,停止,静音等也是PictureBox控件设置其Image属性为properties资源中的图片.如何导入图片资源也是一个关键点。
898 0
关于仿酷狗音乐播放器开源:寻求一套音乐播放器素材,让仿酷狗开源
转载请说明原出处,谢谢~~                   距离发布测试版的仿酷狗音乐播放器,已经几个月过去了。期间很多网友加我QQ来问我开源的问题,我也早有开源意向。
1264 0
阿里巴巴达摩院夺得首届“马栏山杯”国际音视频算法优化大赛【画质损伤修复赛道】冠军
首届“马栏山杯”国际音视频算法优化大赛颁奖盛典暨高峰论坛于9月8日举行。这场由中国工业与应用数学学会、中国网络社会组织联合会作为指导单位,湖南省互联网信息办公室、湖南省科学技术协会主办,中国(长沙)马栏山视频文创产业园、芒果TV承办的算法盛事,云集了全球优秀的算法精英。一大批来自高校、科研院所、互联网企业才子才女们,共1294支队伍报名参赛,其中北京大学34支,清华大学25支,麻省理工学院等国外顶级名校37支。
504 0
如何获取HTML5视频的持续时间
HTML5视频的Bigger体验是非常令人振奋的,很简单的道理,不用加载和依赖烦人的Flash或其他第三方插件来播放视频,也是大功一件。我们可以通过自定义控件对视频进行显示和操控,其中一个常见的需求是显示视频的时长(duration)。
698 0
10.Eclipse下Ndk开发(ffmpeg native 方式播放视频,万能解码(SurfaceView, 播放音频,)
(创建于2018/1/26) 遇到的问题 遇到一个很棘手的问题,在Eclipse上引入两个头文件报错 #include #include 右键->Porperties->C/C++General->Paths and Symbols中可以看到 987671.
1139 0
+关注
业余草
业余草www.xttblog.com网站站长,CODE大全网站站长,爱分享www.ifxvn.com或www.ndislwf.com网站站长!
178
文章
8
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载