Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how video plays multiple videos in a loop". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to play multiple videos in a loop in video" can help you solve your doubts.

Design flow

1. When scanning the QR code, the video list is stored in model, and the first one is saved in order not to retrieve the first video in the html interface:

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

two。 Return to its corresponding html interface:

Return "client/coursePlayer.html"

3. Play the first video using video:

Sorry, your browser does not support embedded video!

4. Monitor the progress of video playback with ended:

VideoDom.addEventListener ('ended', function (event) {if (index = length-1) {videoDom.pause ();} else {index + = 1; videoDom.src = videos [index] .videoUrl; videoDom.play ();}})

The html interface is as follows:

${title} .video {position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 99; transition: all 0.3s; background-color: rgba (0,0,0,0.5);} .video-content {height: 100%; width: 100%;} video {position: initial } video.horizontal-img {width: 100%; height: auto; max-height: 100%;} Sorry, your browser does not support embedded video! Var dom = document; var index = 0; var videos = ${videoUrls}; var videoDom = dom.getElementById ('videoID'); videoDom.play (); videoDom.addEventListener (' ended', function (event) {if (index = length-1) {videoDom.pause ();} else {index + = 1; videoDom.src = videos [index] .videoUrl; videoDom.play () }}) after reading this, the article "how to play multiple videos in video" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to learn more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.