//正常video 标签书写格式
<video width="" height=""> <source src="myvideo.mp4" type="video/mp4"></source> <source src="myvideo.ogv" type="video/ogg"></source> <source src="myvideo.webm" type="video/webm"></source> <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"> <param name="movie" value="myvideo.swf" /> <param name="flashvars" value="autostart=true&file=myvideo.swf" /> </object> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a> </video>
//video 标签属性
<head>
<meta charset="utf-8">
<title>Video.js 7.0</title>
<link href="css/video-js.min.css" rel="stylesheet">
<style>
body {
background-color: #191919
}
.m {
960px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="m">
<video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
poster="m.jpg" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
</video>
<script src="js/video.min.js"></script>
<script src="js/zh-CN.js"></script>
<script type="text/javascript">
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/chinaLife.css" />
<title></title>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/flexible.js"></script>
</head>
<body>
<div class="case_box">
<img src="images/tou.png" class="tou">
<video width="100%" style="object-fit:contain" id="v_video"
preload="auto" webkit-playsinline="true" playsinline="true"
x-webkit-airplay="allow" x5-video-player-type="h5"
x5-video-player-fullscreen="true" x5-video-orientation="portraint"
controls="controls">
<source type="video/mp4"></source>
<!--<source src="vedio/oceans.ogv" type="video/ogg"></source>-->
Your browser does not support the video tag.
</video>
<img src="images/jiao.png" class="jiao">
</div>
<script>
$(function(){
var videoList = [
{"id":"0" ,"videoPoster":"images/zhongjian2.png" , "videoUrl":"vedio/JK-XS-06-1.mp4" },
{"id":"1" ,"videoPoster":"images/zhongjian1.png" , "videoUrl":"vedio/JK-XS-06-2.mp4" },
{"id":"2" ,"videoPoster":"images/zhongjian3.png" , "videoUrl":"vedio/SP-02.mp4" },
{"id":"3" ,"videoPoster":"images/zhongjian4.png" , "videoUrl":"vedio/SP-03.mp4" },
{"id":"4" ,"videoPoster":"images/zhongjian5.png" , "videoUrl":"vedio/SP-04.mp4" },
{"id":"5" ,"videoPoster":"images/zhongjian6.png" , "videoUrl":"vedio/SP-05.mp4" },
{"id":"6" ,"videoPoster":"images/zhongjian8.png" , "videoUrl":"vedio/SP-06.mp4" },
{"id":"7" ,"videoPoster":"images/zhongjian11.png" , "videoUrl":"vedio/SP-07.mp4" },
{"id":"8" ,"videoPoster":"images/zhongjian7.png" , "videoUrl":"vedio/SP-08.mp4" },
{"id":"9" ,"videoPoster":"images/zhongjian9.png" , "videoUrl":"vedio/SP-09.mp4" },
{"id":"10" ,"videoPoster":"images/zhongjian10.png" , "videoUrl":"vedio/SP-10.mp4" }
];
function getUrlParam(id) {
var reg = new RegExp("(^|&)" + id + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
var id = getUrlParam('id');
for(var i=0;i<videoList.length;i++){
if(videoList[i].id==id){
$("#v_video").attr("src",videoList[i].videoUrl);
$("#v_video").attr("poster",videoList[i].videoPoster);
}
}
});
</script>
//后台一定要配个东西 才能解决在ios上不能播放的问题
我们是在自己工程responsiveSuggest web.xml 文件中加了
<servlet-mapping>
<url-pattern>*.mp4</url-pattern>
<
