video元素中的属性,哪一个可以实现视频循环播放?,html5视频循环播放代码

　　最近在开发中遇到的需求是：微信扫描课件二维码，播放其对应的课件视频

　　设计流程

　　1.扫描二维码时，将其视频列表存入模型中，存入第一条是为了，不在超文本标记语言界面重新获取第一条视频

　　model.addAttribute(playUrl ，videos.get(0).获取视频网址())；model.addAttribute(videoUrls ，jsonutils。tojson(视频))；2.返回其对应的超文本标记语言界面

　　返回“客户/球场玩家。html "；3.使用录像播放视频第一条视频

　　video id= video id controls= true style= object-fit:fill src= $ { playUrl } class= horizontal-img preload= metadata WebKit-playsinline= true playsinline= true x-WebKit-airplay= allow X5-video-player-type= H5 X5-video-player-全屏= true X5-video-orientation= landscape 自动播放抱歉，您的浏览器不支持内嵌视频！/视频4。用结束监控视频播放进度

　　script type= application/JavaScript videodom。addevent listener( ended ，function(event){ if(index===length-1){ videodom。pause()；} else { index=1；videoDom.src=videos[index].videoUrlvideodom。play()；} }) /scripthtml界面如下：

　　！doctype html lang= en head meta charset= UTF-8 meta name= viewport content= width=设备宽度，用户可扩展=否，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0 meta http-equiv= X-UA-Compatible content= ie=edge title $ { title }/title style .视频{位置：固定；top:0；底部：0;右：0;左：0;z指数：99;过渡：全0.3秒背景色：rgba(0，0，0，0.5)；} .视频-内容{高度：100%;宽度：100%;}视频{位置：初始；}视频.横向-img {宽度：100%;高度：自动；最大高度：100%;}/style/headbydivclass= video div class= video-content video id= video id controls= true style= object-fit:fill src= $ { playUrl } class= horizontal-img preload= metadata WebKit-play sinline= true play sinline= true x-WebKit-airplay= allow X5-video-player-type= H5 X5-video-player-全屏= true X5-video-orientation= video抱歉，您的浏览器不支持内嵌视频！/video/div/div script type= application/JavaScript var DOM=document；定义变量指数=0;var videos=$ { video URL }；var videoDom=DOM。getelementbyid(“视频id”)；视频世界。play()；视频世界。addevent listener( ended ，function(event){ if(index===length-1){ videodom。pause()；} else { index=1；videoDom.src=videos[index].videoUrlvideodom。play()；} })/脚本/正文/html到此这篇关于HTML5视频循环播放多个视频的方法步骤的文章就介绍到这了，更多相关HTML5视频循环播放多视频内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。