Home > Article > Web Front-end > What should I do if the video tag of html5 cannot be played?
The solution to the problem that the video tag of html5 cannot be played: 1. Use the video screenshot to make a play button and occupy the original position of the video; 2. Monitor the click event of the occupying button and use "video.play() "; 3. Just hide the placeholder image and loading.
The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer
What should I do if the video tag of html5 cannot be played?
IOS-HTML5-Video tag cannot be played
h5 video tag cannot be played in UIwebview, Safari can,
some It works on mobile phones, but not on some mobile phones.
is consistent with video.js. I don’t mind introducing a compatibility package. If you want to have a better experience,
is recommended to use https://videojs.com/
If you want to experience the principle yourself, you can copy the demo code at the end of the article and run it
The traditional method is to write the video tag in HTML and click to play it
<video src="xxx.mp4" controls poster="url?vframe/jpg/offset/5" preload="load"></video> // ?vframe/jpg/offset/5 这个是七牛接口，取截图用的，5就是第5秒截图
BUT, so It won't work when written on IOS 10.3.2/3 11.x.x. iPhone 6/6p 7 and other test machines, but it will work on personal mobile phones. Some phones can work and some phones can't.
After modification:
Step 1: Use the video screenshot to create a play button to occupy the original position of the video
Step 2: Monitor the occupied Click event of the button, use video.play(), you can see that the video has been requested and loaded
Step 3: There is a promise for the loading video, then put the placeholder Just hide the image and loading
#tips:
Different mobile phones/systems will have different request ranges, which are generally divided into 3 -5 206 requests.
console.time("loading milliseconds"); You can see the loading time, which is basically the same as what Charles captured.
Different mobile phones/systems will also have different then performances. Some will return as soon as one click, and some will need to wait until the video is fully loaded before returning.
The attributes of the video DOM can be used to get how much is currently loaded and the total amount. Divide by one to get the percentage. For specific attributes, you can see> https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ video
Online address: http://m.soyoung.com/item/detail?type=0&sys=3&item_id=263&cityId=0
demo code (convenient Some friends sent private messages and wanted to take the demo directly~)
<!DOCTYPE html>
<html data-dpr="1" style="font-size: 55px;">
<head>
<meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"/>
<title>视频DEMO</title>
</head>
<body style="font-size: 24px;">
<style>
html,body,video{
margin: 0;
padding: 0;
}
.pub-swipe .media {
position: relative;
font-size: 0;
margin-bottom: 0.4rem;
}
.pub-swipe .media img,
.pub-swipe .media video {
display: block;
margin: 0 auto;
width: 100%;
min-height: 4.667rem;
}
.pub-swipe .desc,
.pub-swipe .media img {
margin-bottom: 0.267rem;
}
.pub-swipe .media video {
width: 100%;
height: 4.667rem;
}
.pub-swipe .media img.video-go {
width: 2.707rem;
height: 2.707rem;
min-height: 0;
position: absolute;
left: 50%;
margin-left: -.853rem;
top: 1.3rem;
z-index: 5;
}
.hide {
display: none !important;
}
</style>
<div class="pub-swipe">
<p class="media">
<i class="video-i" data-src="http://videosy.soyoung.com/item-263.MP4">
<img src="http://videosy.soyoung.com/item-263.MP4?vframe/jpg/offset/5"/ alt="What should I do if the video tag of html5 cannot be played?" >
<img class="video-go" src="https://mstatic.soyoung.com/m/static/img/product/video_go.png"/ alt="What should I do if the video tag of html5 cannot be played?" >
</i>
</p>
</div>
<script>
/**
* 视频加载兼容处理
*/
var isIPhone = window.navigator.appVersion.match(/iphone/gi);
var creat_video = function () {
var _video = document.getElementsByClassName('video-i');
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);
}
}
_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');
_process.innerHTML = '加载中...';
_loading.setAttribute('class', 'vjs-loading-spinner');
_dom.setAttribute('src', _videoUrl);
_dom.setAttribute('controls', 'controls');
_dom.setAttribute('autoPlay', 'false');
// _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');
_noSound.innerHTML = '无声';
// _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 () {
_this.parentNode.classList.remove('vjs-waiting');
_this.classList.add('hide');
_process.classList.add('hide');
_this.parentNode.appendChild(_dom);
_this.parentNode.appendChild(_noSound);
_dom.addEventListener('ended', function () {
_dom.classList.add('hide');
_this.classList.remove('hide');
_noSound.classList.add('hide');
});
_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>
Recommended study: "HTML5 Video Tutorial"
The above is the detailed content of What should I do if the video tag of html5 cannot be played?. For more information, please follow other related articles on the PHP Chinese website!