关于 H5 video 代码

 //正常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 标签属性

<video id="videoALL"

src="video/01.mp4"

poster="images/1.jpg" /*视频封面*/

preload="auto"

webkit-playsinline="true" /*这个属性是ios 10中设置可以

让视频在小窗内播放，也就是不是全屏播放*/

playsinline="true" /*IOS微信浏览器支持小窗内播放*/

x-webkit-airplay="allow"

x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/

x5-video-player-fullscreen="true" /*全屏设置，

设置为 true 是防止横屏*/>

x5-video-orientation="portraint" /*播放器支付的方向，

landscape横屏，portraint竖屏，默认值为竖屏*/

style="object-fit:fill" /*cover contain*/

loop="loop"/*循环播放（不写不循环）*/

controls="controls" /*显示控制按键（不写不显示）*/

</video>

/ /引用video.js插件

<!doctype html>

<html>

<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 {
width: 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>

/ /video 页面demo

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

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>

<servlet-name>default<servlet-name>
<url-pattern>*.mp4</url-pattern>
<servlet-mapping>

posted @ 2018-07-30 11:43 小小鱼爱吃鱼阅读(494) 评论(0) 编辑收藏举报

刷新页面返回顶部

小小鱼爱吃鱼

关于 H5 video 代码

公告