html 微信H5视频播放问题解决
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 微信H5视频播放问题解决相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no"/>
<style>
html {
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
font-family: Helvetica;
}
html, body {
position: relative;
height: 100%;
}
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, pre, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
font-weight: normal;
text-indent: 0;
}
a, button, input, textarea, select {
background: none;
-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
outline: none;
-webkit-appearance: none;
}
em {
font-style: normal
}
li {
list-style: none
}
a {
text-decoration: none;
}
img {
border: none;
vertical-align: top;
}
table {
border-collapse: collapse;
}
textarea {
resize: none;
overflow: auto;
}
.display_flex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.display_flex_1 {
-moz-box-flex: 1; /*Firefox*/
-webkit-box-flex: 1; /*Safari,Opera,Chrome*/
-webkit-flex: 1;
flex: 1;
}
.hide {
display: none;
}
.container-video{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:2;
display:none;
overflow:hidden;
text-align:center;
}
.container-video.active{
display:block;
}
.container-video video{
height:100%;
width:100%;
margin-left:auto;
margin-right:auto;
}
.button {
position: fixed;
width: 100px;
height: 50px;
background: #266FE5;
left: 50%;
margin-left: -50px;
bottom: 20px;
z-index: 100;
}
</style>
<script src="http://mat1.gtimg.com/hb/chenz/cj0808/js/jquery.min.js"></script>
</head>
<body>
<div class="button"></div>
<div class="container-video">
<video id="video" src="http://qiniu-xpc3.xpccdn.com/5b1f8a486fc00.mp4" preload="auto" webkit-playsinline="true"
playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true"
x5-video-orientation="portrait" style="object-fit: fill;"></video>
</div>
<script>
var video = document.getElementById('video');
$(".button").on('click', function () {
$('.container-video').addClass('active');
$('video')[0].play();
});
//侦听视频结束要做的事儿
$('video').on('ended', function () {
$('.container-video').removeClass('active');
//todo here
});
</script>
</body>
</html>以上是关于html 微信H5视频播放问题解决的主要内容，如果未能解决你的问题，请参考以下文章