html5视频播放_动力节点Java学院整理


Posted in HTML / CSS onJuly 13, 2017

一、html5技术优势

1 关于视频不用插件播放,点击就能看
2 跨平台、好升级、好维护,开发成本相对原生APP低很多
3 对移动的良好支持,支持手势,本地存储和视频续播等,通过H5就可以把自己的网站移动化。
4 更为简洁的代码,更好的交互
5 支持游戏开发

二、html5播放视频

pc端还是用flash播放,但移动端通过html5方式来做。
而html5的video标签只支持mp4、webm、ogg三种格式.目前所有主流浏览器最新版本都支持html5(除了Opera)
H.264已经占领视频市场的80%。如果移动应用视频,建议编译成264格式,有好的高压缩比、高画质。
H.264则是由两个组织联合组建的联合视频组(JVT)共同制定的新数字视频编码标准,它既是ITU-T的H.264,又是ISO/IEC的MPEG-4高级视频编码(Advanced Video Coding,AVC)的第10 部分。因此,不论是MPEG-4 AVC、MPEG-4 Part 10,还是ISO/IEC 14496-10,都是指H.264。

三、html5代码DEMO

<!doctype html>
<html>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <script src="JavaScript/jquery-1.7.2.min.js"></script>
    <script src="JavaScript/jsPlayer.js"></script>
    <script src="JavaScript/dtooltip-min.js"></script>
    <link href="CSS/play.css?var=1121" rel="stylesheet" type="text/css">
     
<script type="text/javascript">
function browserRedirect() {
var sUserAgent= navigator.userAgent.toLowerCase();
var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp= sUserAgent.match(/midp/i) == "midp";
var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid= sUserAgent.match(/android/i) == "android";
var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";
 
 
if(bIsAndroid){
document.getElementById("a").style.display="block";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
document.getElementById("d").style.display="none";
}
else if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM) {
document.getElementById("b").style.display="block";
document.getElementById("d").style.display="none";
document.getElementById("a").style.display="none";
document.getElementById("c").style.display="none";
} else if(bIsIpad) {
document.getElementById("c").style.display="block";
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("d").style.display="none";
 
}
else {
document.getElementById("d").style.display="block";
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
 
}
}
window.onload=function(){browserRedirect();}
 
    $(document).ready(
                function(){
                    var ps=new jsPlayer("700","500","myVideo");
                }
        );
</script>
 
     
<head>
<title>测试移动终端</title>
</head>
<body>
<div id="a"><p>这是安卓手机</p></div>
<div id="b"><p>这是苹果手机</p></div>
<div id="c"><p>这是ipad</p></div>
<div id="d"><p>这是电脑</p></div>
<div style="width:700px;margin:auto;">
    <!--播放器代码开始-->
    <div class="playContent">
        <div class="playScreen">
            <video id="myVideo">
                <source src="Movie/th264.mp4" type="video/mp4">
            </video>
        </div>
        <div class="proLines">
            <div id="origin" class="arial">00:00:00</div>
            <div class="line">
                <div class="isPlayLine">
                    <div class="currentCircle">
 
                    </div>
                </div>
            </div>
            <div id="duration" class="arial"></div>
        </div>
        <div class="playBars">
            <div class="prevBar"><img src="Images/prev.jpg" border="0" id="prev"></div>
            <div class="startBar"><img src="Images/stop.jpg" border="0" id="imgStatus"></div>
            <div class="nextBar"><img src="Images/next.jpg" border="0" id="next"></div>
            <div class="voiceContent">
                <div class="voice">
                    <img src="Images/voice.jpg" id="voiceImg" border="0">
                </div>
                <div class="voiceline">
                    <div class="voicekuai"></div>
                </div>
            </div>
        </div>
    </div>
    <!--播放器代码结束-->
</div>
 
</body>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 #HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 #HTML / CSS
HTML5等待加载动画效果
Jul 27 #HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 #HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 #HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 #HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 #HTML / CSS
You might like
PHP安全编程之加密功能
2006/10/09 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
PyQt实现计数器的方法示例
2021/01/18 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
初中英语教学反思
2014/01/25 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python