示例简介 本文介绍在banner轮播基础上实现播放视频功能，有两种播放方式： 1、点击播放按钮，在banner图位置播放视频（效果如下）； 2、点击播放按钮，全屏播放视频。 实现过程 1、两种播放方式，css样式共用如下：｛padding：0；margin：0；｝。swipercontainer｛width：100；height：211px；｝。video｛position：absolute；zindex：1；top：0；left：0；width：100；height：100；display：none；backgroundcolor：rgba（0，0，0，0。5）；｝。loadingbox｛width：100；position：absolute；top：0；left：0；height：100；fontsize：0；｝。loadingbox。videoimg｛width：100；height：100；｝。loadingbox。palyingimg｛position：absolute；top：50；left：50；transform：translateX（50）translateY（50）；opacity：1；transition：opacity0。3s；｝。loadingbox。loadingimg｛position：absolute；top：50；left：50；transform：translateX（50）translateY（50）；opacity：0；transition：opacity0。3s；｝。loadingbox。loading。loadingimg｛animation：loading1sinfinite；webkitanimation：loading1sinfinite；opacity：1；｝。loadingbox。loading。palyingimg｛display：none；｝。diybuttons｛overflow：hidden；textalign：center；｝。diybuttonsa｛float：left；width：50；｝keyframesloading｛from｛transform：translateX（50）translateY（50）rotate（0deg）；｝to｛transform：translateX（50）translateY（50）rotate（360deg）；｝｝ 2、第一种播放方式，html和js代码如下： 1）onSlideChangeEnd用来轮播结束回调函数removeLoading，移除加载效果，解决切换过快有时候还显示加载效果； 2）由于swiper为了循环轮播，复制了多一份数据，所以里面的video获取未使用ID； 3）监听video的状态play和pause来控制轮播或暂停轮播，增加体验。！DOCTYPEhtmlhtmllangenheadmetanameviewportcontentwidthdevicewidth，initialscale1。0，maximumscale1。0，userscalablenometahttpequivContentTypecontenttexthtml；charsetutf8metanamerenderercontentwebkitmetahttpequivXUACompatiblecontentIEedge，Chrome1titlebanner轮播视频titlelinkrelshortcuticonhreflinkrelstylesheettypetextcsshrefcssstyle。csslinkhrefcssswiper。min。cssrelstylesheetheadbodyvideotypevideomp4width100height211idvideo1classvideosrca2020imgdataimg。jpgdatasrcvideo1。mp4webkitplaysinlinetrueplaysinlinetruex5videoplayertypeh5x5videoorientationportraitx5videoplayerfullscreentrueonplayingremoveLoading（）videoimgclassvideoimgaltsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4g51d46d013f555fc2。jpgimgsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4ga93c059b1f9d7f84。jpgaltclasspalyingimgimgsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4gd9a9aae4123f49b1。jpgaltclassloadingimgvideotypevideomp4width100height211idvideo2classvideosrca2020imgdataimg。jpgdatasrcvideo2。mp4webkitplaysinlinetrueplaysinlinetruex5videoplayertypeh5x5videoorientationportraitx5videoplayerfullscreentrueonplayingremoveLoading（）videoimgclassvideoimgaltsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4gf6d10ca8dcfebbf6。jpgimgsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4ga93c059b1f9d7f84。jpgaltclasspalyingimgimgsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4gd9a9aae4123f49b1。jpgaltclassloadingimgbodyhtml 3、第二种播放方式，html和js代码如下： 1）使用webkitEnterFullScreen全屏播放，兼容性比较好，可以在安卓和苹果正常使用。！DOCTYPEhtmlhtmllangenheadmetanameviewportcontentwidthdevicewidth，initialscale1。0，maximumscale1。0，userscalablenometahttpequivContentTypecontenttexthtml；charsetutf8metanamerenderercontentwebkitmetahttpequivXUACompatiblecontentIEedge，Chrome1titlebanner轮播视频titlelinkrelshortcuticonhreflinkrelstylesheettypetextcsshrefcssstyle。csslinkhrefcssswiper。min。cssrelstylesheetheadbodyvideotypevideomp4width100height211idvideo1classvideosrca2020imgdataimg。jpgdatasrcvideo1。mp4webkitplaysinlinetrueplaysinlinetruex5videoplayertypeh5x5videoorientationportraitx5videoplayerfullscreentrueonplayingremoveLoading（）onwebkitfullscreenchangefullScreenChange（event）videoimgclassvideoimgaltsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4g51d46d013f555fc2。jpgimgsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4ga93c059b1f9d7f84。jpgaltclasspalyingimgimgsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4gd9a9aae4123f49b1。jpgaltclassloadingimgvideotypevideomp4width100height211idvideo2classvideosrca2020imgdataimg。jpgdatasrcvideo2。mp4webkitplaysinlinetrueplaysinlinetruex5videoplayertypeh5x5videoorientationportraitx5videoplayerfullscreentrueonplayingremoveLoading（）onwebkitfullscreenchangefullScreenChange（event）videoimgclassvideoimgaltsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4gf6d10ca8dcfebbf6。jpgimgsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4ga93c059b1f9d7f84。jpgaltclasspalyingimgimgsrca2020imgdataimg。jpgdatasrcimg02。bs178。combg4gd9a9aae4123f49b1。jpgaltclassloadingimgbodyhtml
中国登月计划提上日程后，美国也加快重返月球，结果连续遭遇失败此前中国航天科技集团透露，我国目前正在研制新一代火箭，新一代载人火箭具备将中国人送上月球的能力，预计将在2030年实现，这意味着中国载人登月计划正式提上日程。自从美国阿波……王晗接手山东男篮后的3把火！4大旧臣遭清洗，战术改革考验陶汉王晗低调接手山东高速男篮后在这个夏天悄然完成了对这支球队的改造，如今山东男篮阵容搭建已经完毕，该走的走了，该来的也来了，这期话题我们聊一聊山东男篮的重建之路和王晗来到山东后烧的……调查显示只有10用户对iPhone14感兴趣，网友国产旗舰不不出意外的话，苹果将会于下月中旬召开今年的秋季新品发布会，届时将会正式推出新一代的iPhone14系列新机。根据最新的报道显示，目前苹果已经完成了全部的开发工作，现在就坐等发布……CBA三消息辽宁错失国手后卫，易建联回国隔离，刘传兴因伤缺阵爱国篮，爱CBA，我是洛姐，小伙伴们看完记得点赞！最近几个赛季，辽宁队让球迷们最担心的就是青训的问题，感觉球队已经很久没有出现那种国青队大腿级别的球员了，据悉张镇麟在出国……任正非喊话活下去，华为手机回来了任正非喊话，要华为先活下来，其实从现在的数据和情况来看，华为已经做得很好，而且正在全力的回归！下一个重点，华为宣布Mate50系列将于9月6日发布，对于自家新一代旗舰，首……联想发布两款全新的智能设备，搭载高通骁龙8芯片，续航时间长久联想在8月18日发布了两款全新的智能设备，分别是拯救者Y70与小新PadPro2022款，这两款智能设备的性能表现很好，并且还有很多优势，比如搭载了高通全新的骁龙8芯片，以及拥……报道称苹果正计划通过官方App向用户推送更多广告尽管到目前为止，苹果地图等App一直在避免向用户推送广告，但据说这家库比蒂诺科技巨头，正考虑于AppStore应用商店、新闻、股票、播客等应用中这么做。AppleInsider……刘能台球厅隆重开业，丁俊晖罕见现身捧场，网传两人球技不相上下《乡村爱情》中的刘能，竟然和世界冠军丁俊晖切磋台球，两个人不分上下，为此，刘能花了500万投资了，开了一家台球俱乐部，丁俊晖亲自来捧场祝贺，大家好，这里是哈哈和你讲娱乐，今天我……干净治愈的温柔句子，直抵心灵生活总是两难，就算有再多的执着，再多的不情愿，最终人们也不得不学会接受，从哭着控诉，到笑着对待，结果到头来，不过是一场随遇而安罢了。未曾清贫过便难做人，不经过打击便会永远……1人留队2人离队！火箭骑士2换2交易方案曝光戈登辅佐加兰德休斯顿火箭目前正在和小波特商讨续约问题，同时也在观望队内老将戈登和小马丁的交易行情。据记者MichaelScotto报道，HOOPSHYPE的消息源透露，火箭队希望留住波……青岛地铁这波仪式感拉满，真的爱了！中国山东网感知山东9月7日讯上月，青岛地铁曾将岛城的大美风光印制成精美的明信片，在8个地铁站的服务中心免费发放，希望为在途中奔波的乘客带来一份惬意。如今，一个月过去，明信片爆火……千古温汤世界硒泉温汤温泉位于宜春市城西南15公里处的温汤镇。温汤温泉分布在温汤集镇0。8平方公里范围内，地热温泉中心海拨168米，从地下470米深处花岗岩中涌出，日出水量10000多吨，……