HTML5 video循环播放多个视频

最新推荐文章于 2024-10-18 12:17:55 发布

PiscesCounty

最新推荐文章于 2024-10-18 12:17:55 发布

阅读量5.4k

点赞数 1

分类专栏： html JS 文章标签： video

本文链接：https://blog.csdn.net/qq_36567996/article/details/100761899

版权

在开发中，遇到微信扫描二维码播放对应课件视频的需求。流程包括：存储视频列表，首次加载第一条视频，使用HTML5 video标签播放，并通过监听ended事件来实现视频循环播放。

摘要由CSDN通过智能技术生成

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

设计流程

扫描二维码时，将其视频列表存入model中，存入第一条是为了，不在html界面重新获取第一条视频

	 model.addAttribute("playUrl", videos.get(0).getVideoUrl());
	 model.addAttribute("videoUrls", JsonUtils.toJson(videos));

返回其对应的html界面

return "client/coursePlayer.html";

使用video 播放视频第一条视频

    <video id="videoID" 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-fullscreen