苹果CMS V10插件 – 播放器悬浮教程（终端自适应、适用任何播放器和模板）

　　苹果cms插件简介

　　什么是苹果cms V10播放器悬浮插件？

　　就在用户浏览苹果CMS程序站点播放页面时向上向下划动或滚动页面时候，web播放器从固定位置浮动到指定位置。

　　苹果CMS V10播放器悬浮有什么优势？

　　1,用户在看视频同时可以浏览页面其它内容且web播放器始终在视线内。

　　2,提升页面格调，提升用户体验感。

　　苹果CMS插件截图

　　苹果CMS插件安装

　　1,找到苹果CMS-template模板文件夹内的：vod/play.HTML这个文件。

　　2,在页尾“</body></HTML>”前面插入下面的代码

<style type="text/CSS">
.in {
animation: ac 1s;
}
 
.out {
position: fixed; 
bottom: 5%;
right: 1%;
z-index: 999;
animation: an 0.5s;
}
</style>
<script type="text/JavaScript" src="https://cdn.staticfile.org/JQuery/3.4.1/JQuery.min.js"></script>

<script type="text/JavaScript">
var sj=navigator.userAgent.match(/iPad|iPhone|Linux|Android|iPod/i) != null;
var box=$('.MacPlayer').find('table');
window.onload=function(){
    var ha = (box.offset().top + box.height());
    $(window).scroll(function(){
        if ( $(window).scrollTop() > ha ) {
            box.removeClass('in').addClass('out');
		    if(sj){
			    //此处为移动端悬浮窗口宽高设置，可自行修改
                box.CSS('height','250px');
                box.css('width','100%');
		    }else{
			    //此处为电脑PC端悬浮窗口宽高设置，可自行修改
                box.css('height','300px');
                box.css('width','500px');
		    }
        } else if ($(window).scrollTop() < ha) {
		    box.removeClass('out').addClass('in'); 
		    box.css('height','100%');
        } 
    });
}
</script>