admin管理员组文章数量:1659743
//正常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/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn/v/oceans.webm" type="video/webm">
<source src="http://vjs.zencdn/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/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>
<servlet-name>default<servlet-name><url-pattern>*.mp4</url-pattern>
<servlet-mapping>
转载于:https://wwwblogs/yufeiyu/p/9389773.html
版权声明:本文标题:关于 H5 video 代码 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729839309a1214664.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论