Cant scroll Video Progressbar | HTML

Question

I cant scroll my video progressbar... Is this due to a missing attribute or due to long loading times?

<video autoplay="autoplay" controls="controls" th:src="'/movie/' + ${movie.title}">

Im using Java Spring and Thymleaf to get the Video to the Frontend.

Answer 1

Your Spring Controller would need to support range request (or partial content requests).

This is a little tricky to implement so I would suggest using something like Spring Content. Then you don't need to implement controller code at all. Assuming you are using Spring Boot (let me know if you are not) then it would look something like this:

pom.xml

<dependency>
    <groupId>com.github.paulcwarren</groupId>
    <artifactId>spring-content-rest-boot-starter</artifactId>
    <version>0.0.10</version>
</dependency>
<dependency>
    <groupId>com.github.paulcwarren</groupId>
    <artifactId>content-fs-spring-boot-starter</artifactId>
    <version>0.0.10</version>
</dependency>

SpringBootApplication.java

@SpringBootApplication
public class YourSpringBootApplication {

  public static void main(String[] args) {
    SpringApplication.run(YourSpringBootApplication.class, args);
  }

  @Configuration
  @EnableFilesystemStores
  public static class StoreConfig {
    File filesystemRoot() {
        return new File("/path/to/your/movies");
    }

    @Bean
    public FileSystemResourceLoader fsResourceLoader() throws Exception {
      return new FileSystemResourceLoader(filesystemRoot().getAbsolutePath());
    }
  }

  @StoreRestResource(path="movie")
  public interface MovieStore extends Store<String> {
    //
  }
}

This is all you need to create a REST-based movie service at /movie supporting streaming. It actually supports full CRUD functionality as well; Create == POST, Read == GET (include byte-range support), Update == PUT, Delete == DELETE in case that is useful to you. Uploaded movies will be stored in "/path/to/your/movies".

So...

GET /movie/my-movie.mp4

will return a partial content response and this will enable the progress bar on your movie player (that will also issue subsequent range requests to fetch the movie as you move the slider).

HTH