What should I do if the video tag of html5 cannot be played?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What should I do if the video tag of html5 cannot be played?

藏色散人

Jan 28, 2023 am 09:36 AM

html5 video

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.

What should I do if the video tag of html5 cannot be played?

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秒截图

Copy after login

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="/static/imghw/default1.png"  data-src="http://videosy.soyoung.com/item-263.MP4?vframe/jpg/offset/5"  class="lazy"  / alt="What should I do if the video tag of html5 cannot be played?" >
                    <img  class="video-go lazy"  src="/static/imghw/default1.png"  data-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(&#39;video-i&#39;);
                if (_video.length > 0) {
                    for (var i = 0; i < _video.length; i++) {
                        var _that = _video[i];
                        _that.addEventListener(&#39;click&#39;, function (e) {
                            var _this = e.currentTarget,
                                _videoUrl = _this.getAttribute(&#39;data-src&#39;),
                                _img = _this.children[0].getAttribute(&#39;src&#39;),
                                _dom = document.createElement(&#39;video&#39;),
                                _autoPlayAllowed = true,
                                _loading = document.createElement(&#39;div&#39;),
                                _p,
                                _process = document.createElement(&#39;i&#39;);
                            _noSound = document.createElement(&#39;em&#39;);
                            if (_this.getAttribute(&#39;data-video&#39;)) {
                                var _video = _this.parentNode.querySelectorAll(&#39;video&#39;);
                                var _noSound = _this.parentNode.querySelectorAll(&#39;.no-sound&#39;);
                                if (_video.length > 0) {
                                    _dom = _video[0];
                                    // if (_dom.ended) {
                                    if (isIPhone) {
                                        //修改Ios11状态不准，视频无法播放的问题
                                        if (_dom.src.indexOf(&#39;random&#39;) > -1) {
                                            _dom.src = _dom.src.split(&#39;random=&#39;)[0] + &#39;random=&#39; + _dom.src.split(&#39;random=&#39;)[1] + 1;
                                        } else {
                                            _dom.src = _dom.src + &#39;?random=&#39; + Math.floor(Math.random() * (100 - 10 + 1) + 10);
                                        }
                                    }
                                    _noSound[0].classList.remove(&#39;hide&#39;);
                                    _dom.play();
                                    _this.classList.add(&#39;hide&#39;);
                                    _dom.classList.remove(&#39;hide&#39;);
                                    // }
                                }
                                return;
                            }
                            _this.setAttribute(&#39;data-video&#39;, &#39;1&#39;);
                            _process.setAttribute(&#39;class&#39;, &#39;vjs-process&#39;);
                            _process.innerHTML = &#39;加载中...&#39;;
                            _loading.setAttribute(&#39;class&#39;, &#39;vjs-loading-spinner&#39;);
                            _dom.setAttribute(&#39;src&#39;, _videoUrl);
                            _dom.setAttribute(&#39;controls&#39;, &#39;controls&#39;);
                            _dom.setAttribute(&#39;autoPlay&#39;, &#39;false&#39;);
                            // _dom.setAttribute(&#39;x5-video-player-type&#39;, &#39;h5&#39;);
                            _this.parentNode.appendChild(_loading);
                            _this.parentNode.appendChild(_process);
                            _this.parentNode.classList.add(&#39;vjs-waiting&#39;);
                            _noSound.setAttribute(&#39;class&#39;, &#39;no-sound&#39;);
                            _noSound.innerHTML = &#39;无声&#39;;
                            // _dom.setAttribute(&#39;webkit-playsinline&#39;, &#39;webkit-playsinline&#39;);
                            // _dom.setAttribute(&#39;playsinline&#39;, &#39;playsinline&#39;);
                            _dom.setAttribute(&#39;poster&#39;, _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 + &#39;%&#39;;
                                console.log(_end + &#39; &#39; + _duration)
                                if (_a < 10) {
                                    setTimeout(_dom_buffered, 200);
                                } else {
                                    _dom_buffered();
                                }
                            };
                            var _dom_buffered = function () {
                                _this.parentNode.classList.remove(&#39;vjs-waiting&#39;);
                                _this.classList.add(&#39;hide&#39;);
                                _process.classList.add(&#39;hide&#39;);
                                _this.parentNode.appendChild(_dom);
                                _this.parentNode.appendChild(_noSound);
                                _dom.addEventListener(&#39;ended&#39;, function () {
                                    _dom.classList.add(&#39;hide&#39;);
                                    _this.classList.remove(&#39;hide&#39;);
                                    _noSound.classList.add(&#39;hide&#39;);
                                });
                                _dom.currentTime = 0;
                                console.timeEnd("加载毫秒");
                            };
                            if (_p instanceof Promise) {
                                _p.catch(function (error) {
                                    console.log(error.message);
                                    if (error.name === &#39;NotAllowedError&#39;) {
                                        _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>

Copy after login

What should I do if the video tag of html5 cannot be played?

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn