如何实现html5 video标签 手机浏览器播放视频事件判定播放中的视频超出电手机的浏览范围后视频暂停播放

Posted 2023-05-10

电脑的浏览器可以办到同一个页面多次载入ajax视频，超出浏览范围就暂停了。但是手机却只能第一个视频自动暂停，往下的视频都不会自动暂停。代码如下谢谢大神。ajax 无限载入视频。
<script> var u=0; window.onscroll=function()var video=document.querySelectorAll('video');if( video[u].getBoundingClientRect().top<-video[u].scrollHeight || video[u].getBoundingClientRect().bottom>document.documentElement.clientHeight+video[u].offsetHeight )video[u].pause();for(let v=0 ;v< video.length ;v++)video[v].onclick=function()video[u].pause();video[u].currentTime=0;video[v].play();u=v; </script>

播放不了是因为手机浏览器不支持html5的这个video新特性。
ios方面，根据苹果官方提供的文档，Mobile Safari支持包括视频 (video)和音频(audio) 标签，离线存储 (web storage)，主流的CSS3效果 (transitions, animations, transforms, gradient, masks等)在内的HTML5特性的。此外，虽然未更新文档，4.2 据说也加入了对Web Sockets，部分XHR-2，加强了对Canvas和SVG的支持。可惜的是，似乎尚未支持Web Worker。
android方面，Android 2.2 和 2.3 的浏览器对HTML5的支持似乎相对有限，应该支持CSS3 (因为他们都是webkit内核)，不支持SVG和Web Sockets，部分支持Video标签 (WebM)。 参考技术A html开发手机app，使用了video标签播放视频，在电脑浏览器中视频都可以正常播放，在手机的浏览器中也可以播放，但是嵌入到app中，视频就不能播放了，安卓和苹果都都不能正常 参考技术B iOS方面，根据苹果官方提供的文档，Mobile Safari支持包括视频 (video)和音频(audio) 标签，离线存储 (web storage)，主流的CSS3效果 (transitions, animations, transforms, gradient, masks等)在内的HTML5特性的。此外，虽然未更新文档，4.2 据说也加入了对Web Sockets，部分XHR-2，加强了对Canvas和SVG的支持。可惜的是，似乎尚未支持Web Worker。 参考技术C 他电话恐惧吃醋吃吃吃v吃 参考技术D ✧٩(ˊωˋ*)و✧

解决h5的video标签，androidipad客户端播放正常，iphone客户端无法播放

在做html5时插入一个视频播放标签video后，测试时android、ipad客户端播放正常，唯独iphone自带浏览器无法播放。

解决办法：

判断用户所使用客户端访问h5页面时是iphone时，点击播放视频触发的是一个视频url链接,而非video标签。

js判断代码如下：此代码引用Github中Stanko/html-canvas-video-player

var isIphone = navigator.userAgent.indexOf(‘iPhone‘) >= 0;
// Other way to detect iOS
// var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);

if (isIphone) {
    // Init CanvasVideoPlayer here
    new CanvasVideoPlayer({
        // Options
    });
}
else {
    // Use HTML5 video
}

根据以上的isIphone判断代码即可解决此类问题

eng:（html代码就不再贴出）

$(function(){
        var isIphone = navigator.userAgent.indexOf(‘iPhone‘) >= 0;
        if (isIphone) {
            $(".play_video").click(function(){
                window.location="视频的绝对地址url"
            });
        }
        else {
            $(".play_video").click(function(){
                
                var videoHtml = "<video id=\"video_span\" class=\"url_video\" src=\"视频的绝对地址url\" x-webkit-airplay=\"true\" webkit-playsinline=\"true\" poster=\"视频封面图片的绝对地址\" preload=\"null\" loop=\"loop\" autoplay  controls=\"controls\"></video>"
                $("#video_div").html(videoHtml)
                $(".section").addClass("masked");
                $(".video").show();
                
            });
        }
    });