0

I need to embed videos into my web application and have the following requirements:

  • The videos need to be automatically transcoded into different resolutions
  • Playbackspeed needs to be selectable
  • Needs to work on mobile
  • I need to modify the player
  • The videos need to be uploadable by non software developers => user interface for video upload and management

The problem with embedding a video from a platform is that you usually have to use an iframe to do this. However if the iframe is from another domain, I don't have access to its content and therefor can't modify the player, because I can't access the video element residing in the iframe.

The modifications I need to make are the following:

  • Put markers at specific cuepoints in the timeline
  • Pause the video at the cuepoints
  • Display some additional information below the video when the cuepoint is reached

The only possible solution, that I found so far, is hosting a platform myself on a subdomain of my web applications domain and adjust the code of that platform to set the document.domain property to the domain of my web application. That way I would be able to access the video tag that is inside the iframe provided by the platform. The things that I don't like about that solution is that I would prefer not to host the platform myself and it would also be nice if I wouldn't need to modify the platform.

Lyannic
  • 307
  • 1
  • 2
  • 10
  • There is no single product or solution to do all of this. Mux.com will do most of it, but you will need to do the chapters and a small UI for uploads. – szatmary Jun 11 '19 at 13:56

1 Answers1

0

You can use video tag provided by HTML5.

<video>
<src = "your src here">
</video>

firstly create video according to all the resolutions and store it then change the src for different types of resolutions using javascript web API

var videoplayer = document.getElementsByTagName("video")[0];

videoplayer.src = "new src here according to the resolution"

playback speed can also be changed using the same way

videoplayer.playbackRate = "value according to the user"

Here is an example for looking on modifying the videoplayer.

You can detect the speed of the user using javascript and render the source of video accordingly.

If you dont want to download anything to check the network speed then have a look at how to implement adaptive starting experience of video using service-worker.

Shaurya Vardhan Singh
  • 664
  • 7
  • 20
  • Thank you for your answer. The Problem with just using the normal HTML5 video tag is that I would need to transcode everything myself and then link every resolution. Adaptive resolution would also not be supported. Another problem is that I would have to provide some kind of userinterface to upload videos. – Lyannic Jun 11 '19 at 10:11
  • you can use javascript to provide adaptive resolution. Use window.innerWidth to get the width of the browser and then provide source of the video. As for an interface you can provide the link to upload the video at a folder in cloud and access it from there. – Shaurya Vardhan Singh Jun 11 '19 at 12:58
  • WIth adaptive resolution I mean adapt the resolution according to the internet speed. And I still have the problem that the user would need to transcode the video and upload e.g. 5 different versions. I want the transcoding to be done automatically. – Lyannic Jun 11 '19 at 15:08
  • give a check to vimeo API for videos. It provides all of the features like transcoding as well as its player is editable(its iframe but it has cuepoints event which will let you implement the features you want). – Shaurya Vardhan Singh Jun 11 '19 at 20:56
  • I know the vimeo API and I know the cuepoint feature. But my problem is that I couldn't find any way to change the timeline of the player to display the cuipoints. – Lyannic Jun 12 '19 at 21:19