搜索到
851
篇与
的结果
-
-
调用腾讯、优酷视频播放器APi 工作中经常用到一些腾讯的或者优酷的视频，以下是调用视频接口的方法，注意线上才有效。调用腾讯视频播放器APi<!doctype html> <html> <head> <meta charset="utf-8"> <title>调用腾讯视频播放器APi</title> <script src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="utf-8"></script> </head> <body> <div id="videoCon" class="video"></div> <script> var video = new tvp.VideoInfo(); video.setVid("w0605len8by");//视频vid var player = new tvp.Player(750, 450);//视频高宽 player.setCurVideo(video); player.addParam("autoplay","0");//是否自动播放，1为自动播放，0为不自动播放 player.addParam("wmode","opaque"); player.addParam("showend",0); player.addParam("adplay",0); player.addParam("wmode","transparent"); player.addParam("pic","http://ossweb-img.qq.com/images/roco/act/a20120925movie/video_pic.jpg");//默认图片地址 player.addParam("flashskin", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf");//是否调用精简皮肤，不使用则删掉此行代码 player.write("videoCon"); </script> </body>调用优酷视频播放器APi<script src="http://player.youku.com/jsapi" charset="utf-8"></script>player =newYKU.Player('youkuplayer',{ styleid:'0', //播放样式0-9 client_id: '', //登录优酷在后台创建一个应用结可以拿到 vid: 'ID', //视频ID 跟腾讯的vid是一样的道理 autoplay:true, //是否自动播放视频 show_related:true, //播放完成是否显示相关视频 embsig: '', //嵌入式播放器签名(非网站类应用必须设置) password: 'md5('播放密码'+client_id)',//免密码播放 events:{ onPlayerReady:function(){/*your code*/},//播放器准备就绪调用 onPlayStart:function(){/*your code*/},//播放器开始播放时调用 onPlayEnd:function(){/*your code*/}//播放器结束播放时调用 player.create({ onpause:function(){ console.log('暂停了') }, onallended:function(){ console.log('播放完了') }, onfullscreen:function(){ if (this.isFullScreen == true) { console.log("全屏了") }else { console.log("取消全屏了") } } }) functionplayVideo(){ player.playVideo();//播放 } functionpauseVideo(){ player.pauseVideo();//暂停 } functionseekTo(s){ player.seekTo(s);//定位至指定时间 } functioncurrentTime(){ returnplayer.currentTime();//当前播放时间 }
-
解决Vue报错Module not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'问题 Failed to compile../src/views/Login.vueModule not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'原因：当前找不到less-loader，默认vue-cli工具帮我们创建了项目，并没有帮我们安装less-loader，我们只需安装less-loader和less即可。安装好之后，我们发现并不能生效，我们只需重新启动即可
-
-
swiper插件的使用 swiper插件简单又好用，推荐给大家，例子：swiper3.0一、形式1html代码：<div class="swiper-container" id="al-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="https://www.tpxhm.com/fdetail/6.html"><img src="https://www.tpxhm.com/fdetail/images/d1.jpg" alt="" /></a></div> <div class="swiper-slide"><a href="https://www.tpxhm.com/fdetail/6.html"><img src="https://www.tpxhm.com/fdetail/images/d2.jpg" alt="" /></a></div> </div> <!-- <div class="swiper-button-next swiper-button-black" id="al-button-next"></div> --> <!-- <div class="swiper-button-prev swiper-button-black" id="al-button-prev"></div> --> <!-- Add Pagination --> <div class="swiper-pagination" id="al-pagination"></div> <!-- Add Arrows --> </div> <script> var swiper = new Swiper('#al-container', { pagination: '#al-pagination', nextButton: '#al-button-next', prevButton: '#al-button-prev', slidesPerView: 1, paginationClickable: true, spaceBetween: 30, autoplay: 4500, speed:600, autoplayDisableOnInteraction : false, loop: true }) </script>css样式更改、定制#al-container{ width: 1063px; height: 731px; float: left; margin-left: 65px;} #al-pagination{bottom: 62px;} #al-pagination .swiper-pagination-bullet{ background: #fff; opacity: 1; } #al-pagination .swiper-pagination-bullet-active{ background: blue;} #al-button-next{ background: url(images/btn_r.png) no-repeat; top: 8%; width: 36px; height: 36px;} #al-button-prev{ background: url(images/btn_l.png) no-repeat; top: 8%;width: 36px; height: 36px;}二、形式2html代码：<div class="swiper_list"> <div class="tab"> <span class="active">选项1</span> <span>选项2</span> <span>选项3</span> </div> <div class="swiper-container" id="swper1-container" > <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://www.tpxhm.com/fdetail/images/cj_67.jpg" width="100%" alt=""></div> <div class="swiper-slide"><img src="https://www.tpxhm.com/fdetail/images/last3_02.jpg" width="100%" alt=""></div> <div class="swiper-slide"><img src="https://www.tpxhm.com/fdetail/images/last2_02.jpg" width="100%" alt=""></div> </div> </div> </div>var mySwiper2 = new Swiper('#swper1-container', { autoplay: 3000, //可选选项，自动滑动 onSlideChangeStart: function(swiper) { var j = mySwiper2.activeIndex; $('.tab span').removeClass('active').eq(j).addClass('active'); }, //pagination: '.pagination1', }); /*列表切换*/ $('.tab span').bind('click', function(e) { e.preventDefault(); //得到当前索引 var i = $(this).index(); $('.tab span').removeClass('active').eq(i).addClass('active'); mySwiper2.slideTo(i, 1000, false); });三、形式3<div class="swiper-container" id="al-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="https://www.tpxhm.com/fdetail/6.html"><img src="https://www.tpxhm.com/fdetail/images/d1.jpg" alt="" /></a></div> <div class="swiper-slide"><a href="https://www.tpxhm.com/fdetail/6.html"><img src="https://www.tpxhm.com/fdetail/images/d2.jpg" alt="" /></a></div> </div> <!-- <div class="swiper-button-next swiper-button-black" id="al-button-next"></div> --> <!-- <div class="swiper-button-prev swiper-button-black" id="al-button-prev"></div> --> <!-- Add Pagination --> <div class="swiper-pagination" id="al-pagination"></div> <!-- Add Arrows --> </div> <script> var swiper = new Swiper('#al-container', { pagination: '#al-pagination', paginationClickable: true, direction: 'vertical', // 如果需要前进后退按钮 nextButton: '#al-button-next', keyboardControl : true, mousewheelControl : true, direction:'vertical', mousewheelForceToAxis : true, autoplay:3000 }); </script>swiper4.0html代码：<div class="swiper-container" id="swiper-container1"> <div class="swiper-wrapper"> <div class="swiper-slide"> 1 </div> <div class="swiper-slide"> 2 </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next" id="swiper-button-next1"></div> <div class="swiper-button-prev" id="swiper-button-prev1"></div> </div>js代码： var swiper = new Swiper('#swiper-container1', { slidesPerView: 4, spaceBetween: 13, centeredSlides: false, autoplay: { delay: 2500, disableOnInteraction: true, }, loop: true, loopFillGroupWithBlank: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '#swiper-button-next1', prevEl: '#swiper-button-prev1', }, });
