<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{$Think.config.sitename}</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
<link href="{$Think.HTML_STATIC}/css/mui.css" rel="stylesheet">
<link rel="stylesheet" href="{$Think.HTML_STATIC}/css/showimgs.css">
<link rel="stylesheet" type="text/css" href="{$Think.HTML_STATIC}/css/webuploader.css">
<link href="{$Think.HTML_STATIC}/css/add.css" rel="stylesheet" type="text/css">
<link href="{$Think.HTML_STATIC}/css/style.css" rel="stylesheet">
<style type="text/css">
.videoPlay{position: absolute;z-index: 5;left: 50%;top: 50%;margin-left: -2.25rem;margin-top: -2.25rem;}
.videoPlay img{width: 4.5rem;height: 4.5rem;}
video{width: 100%;}
</style>
</head>
<body class="bodyb">
<div class="asktopss">
<div class="m" style="width:100%;position: relative;">
<video id="video" preload="auto"
poster="{$stagearticle.a_img}" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
x5-playsinline="true" style="object-fit: fill;" src="{$stagearticle.a_video}" >
</video>
<i class="video-i videoPlay" id="play" data-src="{$stagearticle.a_video}">
<img src="{$Think.HTML_STATIC}/images/125.png" class="video-go " />
</i>
</div>
<script type="text/javascript">
// js代码
/**
* 视频加载兼容处理
*/
var creat_video = function() {
var _video = document.getElementsByClassName('video-i');
var video=document.getElementById('video')
if (_video.length > 0) {
for (var i = 0; i < _video.length; i++) {
var _that = _video[i];
_that.addEventListener('click', function(e) {
var _this = e.currentTarget,
_videoUrl = _this.getAttribute('data-src'),
_img = _this.children[0].getAttribute('src'),
_dom = document.createElement('video'),
_autoPlayAllowed = true,
_loading = document.createElement('div'),
_p,
_process = document.createElement('i');
_noSound = document.createElement('em');
if (_this.getAttribute('data-video')) {
var _video = _this.parentNode.querySelectorAll('video');
var _noSound = _this.parentNode.querySelectorAll('.no-sound');
if (_video.length > 0) {
_dom = _video[0];
// if (_dom.ended) {
if (isIPhone) {
//修改Ios11状态不准,视频无法播放的问题
if (_dom.src.indexOf('random') > -1) {
_dom.src = _dom.src.split('random=')[0] + 'random=' + _dom.src.split('random=')[1] + 1;
} else {
_dom.src = _dom.src + '?random=' + Math.floor(Math.random() * (100 - 10 + 1) + 10);
}
}
video.classList.add('hide')
_noSound[0].classList.remove('hide');
_dom.play();
_this.classList.add('hide');
_dom.classList.remove('hide');
// }
}
return;
}
_this.setAttribute('data-video', '1');
_process.setAttribute('class', 'vjs-process');
_dom.setAttribute('style', 'object-fit: fill !important');
_dom.setAttribute('poster', '{$stagearticle.a_img}');
_dom.setAttribute('preload', 'auto');
_dom.setAttribute('controls', 'controls');
_dom.setAttribute("webkit-playsinline",'true')
_dom.setAttribute('x-webkit-airplay','true')
_dom.setAttribute('playsinline','true')
_dom.setAttribute('x5-playsinline','true')
_dom.setAttribute('autoPlay', 'false');
_loading.setAttribute('class', 'vjs-loading-spinner');
_dom.setAttribute('src', _videoUrl);
// _dom.setAttribute('x5-video-player-type', 'h5');
_this.parentNode.appendChild(_loading);
_this.parentNode.appendChild(_process);
_this.parentNode.classList.add('vjs-waiting');
_noSound.setAttribute('class', 'no-sound');
// _dom.setAttribute('webkit-playsinline', 'webkit-playsinline');
// _dom.setAttribute('playsinline', 'playsinline');
// _dom.setAttribute('poster', _img);
_p = _dom.play();
console.time("加载毫秒");
var _dom_buffered_promise = function() {
var _end = _dom.buffered.end(0);
var _duration = _dom.duration;
var _a = Math.round(_end / _duration * 100);
_process.innerHTML = _a + '%';
console.log(_end + ' ' + _duration)
if (_a < 10) {
setTimeout(_dom_buffered, 200);
} else {
_dom_buffered();
}
};
var _dom_buffered = function() {
video.classList.add('hide')
_this.parentNode.classList.remove('vjs-waiting');
_this.classList.add('hide');
_process.classList.add('hide');
_this.parentNode.appendChild(_dom);
_dom.addEventListener('ended', function() {
console.log("ok")
});
_dom.currentTime = 0;
console.timeEnd("加载毫秒");
};
if (_p instanceof Promise) {
_p.catch(function(error) {
console.log(error.message);
if (error.name === 'NotAllowedError') {
_autoPlayAllowed = false;
}
}).then(function(e) {
if (_autoPlayAllowed) {
_dom_buffered_promise();
}
});
} else {
//ios8-9拿不到promise需要给个延时处理
setTimeout(function() {
_dom_buffered();
}, 4000);
}
});
}
}
};
new creat_video();
</script>
</body>
</html>