微信端用原生代码实现视频播放（苹果手机与安卓手机有点差异）

最新推荐文章于 2024-08-25 17:56:49 发布

那年花

最新推荐文章于 2024-08-25 17:56:49 发布

阅读量2.3k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_25543635/article/details/78931989

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

后台获取到播放地址

<span class="videoss"  name="${l.url}" totype="${l.suffix}">${l.name}.${l.suffix}</span>

<a href="#"> <button id="showVideo">观看</button></a>

播放视频的容器（该容器是原生代码安卓手机会调用H5播放器，苹果手机不能，所以在安卓上是会直接弹出一个播放界面，而苹果则只是在原页面播放）

<div id="cancelVideo"  style="background-color:#929292;display: none"><span id="cancelSpan">X</span></div>
<video id="bigvideo" controls  webkit-playsinline="true" style="object-fit:fill;display: none"
       x5-video-player-fullscreen="true" x5-video-player-type="h5" airplay="allow"
       webkit-playsinline="true" x-webkit-airplay="true"  playsinline="true"  x-webkit-airplay="allow">
</video>

JS事件

//视频播放暂停
$("#bigvideo").on("click",function(){
    if(this.paused){
        this.play();
    }else{
        this.pause();
    }
});
$("#cancelSpan").on("click",function(){
    $("#cancelVideo").hide();
    $("#bigvideo").attr("width","");
    $("#bigvideo").attr("heigth","");
    $("#bigvideo").attr("src","");
    $("#bigvideo").hide();
});

var video=document.querySelector("video");
video.addEventListener('ended', function (e) {
    // 播放结束时触发
    $("#cancelVideo").hide();
    $("#bigvideo").attr("width","");
    $("#bigvideo").attr("heigth","");
    $("#bigvideo").attr("src","");
    $("#bigvideo").hide();
});
//退出全屏触发
video.addEventListener("x5videoexitfullscreen", function(){
    $("#cancelVideo").hide();
    $("#bigvideo").attr("heigth","");
    $("#bigvideo").attr("src","");
    $("#bigvideo").hide();
});

//视频播放
$("#showVideo").on("click",function(){
    $("#bigvideo").attr("src",$(this).parent().prev().attr("name"));
    document.getElementById("bigvideo").style.width=window.innerWidth+"px";
    $("#cancelVideo").show();
    $("#bigvideo").show();
    $("#bigvideo").click();
});