Could anybody run WebTorrent with VideoJS 6.xx or 7.xx ?

[WatchSoMuch]

What version of WebTorrent?
the version on 2019-08-06 dont know where to find the version?!
What operating system and Node.js version?
Browser
What browser and version? (if using WebTorrent in the browser)
Chrome version 76

This is an old question but could not post under it because the issue was closed.
This page shows example of how to use WebTorrent with Javascript Players like VideoJS but it works with VideoJS 5.19
https://qiita.com/mehdi/items/22ba55ae30bdcedd0746

But when using VideoJS 7 it doesn't work properly, when you pause or seek the video it never resumes.
Does anybody know any trick to make it work?

[feross]

I'm not sure how to do it since I haven't used VideoJS 7. We can keep this issue open and see if anyone responds.

I like the page that you linked to. We should add more examples to the docs/ folder that shows how to use WebTorrent with various players. I'll open an issue for that: #1686

[WatchSoMuch]

I have found the problem and it seems its not a serious problem, when I press the show controls on the VideoJS player, the main player controlls is displayed, then I can see when I seek or pause the player is paused, but the resume button of videojs controll isn't resuming the player, instead pressing the video player play will resume it.
I think its fixable with some code, I haven't done yet

[WatchSoMuch]

I am still working on VideoJS to work but found that the problem is VideoJS doesn't work properly on <video src="somefile.mp4" and when it pause it can not be resumed.
Instead we have to let the source to <source type="video/mp4" src="samefile.mp4" and then it works fine.
Now the question is can we make webtorrent render to ?

[feross]

You can use the file.renderTo method to render to the <video> tag of your choosing. Does that work?

[WatchSoMuch]

No the problem is more complicated.
But I after I traced the videoJS source I found a magic that works, I write key points of the trick here:

Html:
<video id="HtmlVideo"....>

simplified script:
var htmlPlayer=document.getElementById("HtmlVideo");

//Initialize VideoJS, with some optional options
vjs=videojs("HtmlVideo",{preload: "auto",controls: true,fluid: true,autoplay: true});

//the after adding torrent to client and got the playable file
//this is because videojs changes the element id
mp4File.RenderTo("#"+htmlPlayer.id);

//Get blob url from the video, we need to set this to the video so webtorrent works, getting this from //a method of webtorrent is not enough, we have to render it to the video anyways.
var blobUrl=htmlPlayer.getAttribute("src");

//this is the magic line, I have tested using the vjs.src(blobUrl) written in the vjs documentation but that doesn't work, it seems doing this right after renderTo is too soon and it shows an error over the player that the player doens't know the source, using a setTimeout(function(vjs.src(blobUrl)),100); maked it work in Chrome and Firefox, but not Edge, putting it in video event "metadataloaded" didn't help either so I tried doing this:
vjs.cache_.source = { type: "video/mp4", "src": blobUrl };
And it worked in Chrome,Firefox,Edge and now videojs is working like a charm, the seek, pause and play button works.
The logic is that videojs is not mature enough to accept such source in the src(), the functions that check the source throw error, those checkings think it can not be played although video is already playing in the player, so we have to set it to the functions without checkings to the cache_.source and bypass some checkings.

I hope it help many hours like my few days

[feross]

Great, thanks for sharing your solution.
I'm closing this issue since there's no bug to fix here, but feel free to continue discussion! ✨

[WatchSoMuch]

After a week working on videojs, I decided not to use it, I am currently interested in Plyr which is lightweight and mature enough.
VideoJS is too heavy (minified is 0.5 MB) and it has load of scripts to work on old browsers using flash and supporting multiple tracks and hls/dash which in our case using webtorrent only we need modern browsers, also videojs is very complicated and the documentation is not clear, I could not add a custom menu to it.
I was thinking of writing my custom player but I think I have to put too much time on it to test different browsers
I will share my experience about Plyr when its completely done.