pseudosavant / player.html

One file drop-in media player web app for using video and audio files served using basic HTTP directory listing
MIT License
216 stars 39 forks source link

Hi Paul, problem autoplay using iframe tag #23

Closed leeuwtjex closed 7 months ago

leeuwtjex commented 1 year ago

Hi Paul, thanks for the great app I can use by your great work.

There is a small matter I walked into , which is indirectly related to the player.html app, I think. I will shortly describe the situation, maybe you could give a direction on it.

I use the player.html app in combination with a html page. In the html code I sue a iframe to show a video on the page, where a video is forwarded by a src tag. I could give you the complete code, but it is probably not necessary for you to know what happens. The whole thing works good. too good. I use 2 iframes on my site playing video's that are listed in your videoapp player.html The problem is on site load, they start playing at once all together, which gives a chaos for the user experience. A third iframe fowarded to another external source on vk.com, just waits till the user presses play.

Before you ask, yes, I know video forwarding by iframe is old coding, we should use HTML5 and the 'video' tag now. For the user group however, it i needed to play on all older webrowsers as well. I don't want people be depended on HTML5 if they live in other parts of the world. Backwards compatibility.

My question; since the issue only occurs on iframes that are forwarded to local video's on a path where the player.html is in use, it could be something in the configuration of player.html Is there an option to switch off autoplay in player.html?

ps, I tried to link with a javascript function as well, for example like this: window.location.assign("video-api-link-player.html") Same problem it start autoplaying.

Sorry if my perception and attempts are poor. I am sure I am trying something unusual here. However, any help is welcome. Thanks in advance.

Dirk.

update:

Paul, in the iframes I mentioned, I use as video source in the src tag, a link which I copied in the browser, while playing the video by your html script. When a video plays in your script a long line of api like code is displayed in the url. It is this I use as video source in the iframe. Would it be possible to change something in that link to prevent autoplay?

pseudosavant commented 8 months ago

Hi @leeuwtjex, I'm not sure I'm clear on the exact issue. Are you saying you want it to not autoplay the videos in the iframes? I don't know how you create your iframe embed link but you should be able to do this. The data after the # in the URL is all base64 encode JSON with the playback information. You should be able to create and set those values, base64 encode them, and use that to start playback.

This URL includes this JSON.

URL

https://player-html-remix.glitch.me/src/player.html#eyJsb2NhdGlvbiI6Imh0dHBzOi8vcGxheWVyLWh0bWwtcmVtaXguZ2xpdGNoLm1lL3ZpZGVvcy8iLCJ2aWRlbyI6Imh0dHBzOi8vcGxheWVyLWh0bWwtcmVtaXguZ2xpdGNoLm1lL3ZpZGVvcy9UaGUlMjBMb3MlMjBBbmdlbGVzJTIwTGFrZXJzJTIwLSUyMFNhbWUlMjBhcmVuYS4lMjBTYW1lJTIwYmFza2V0LiUyMFNhbWUlMjBkdW5rLiUyMDE5JTIweWVhcnMlMjBhcGFydC4lMjAlRjAlOUYlOTIlOUMlRjAlOUYlOTIlOUItMTIyNTkzOTM4NTUxNTgyMzEwNC5tcDQiLCJ0aW1lIjo3Ljk0MTE1NH0%3D

JSON

{
  "location": "https://player-html-remix.glitch.me/videos/",
  "video": "https://player-html-remix.glitch.me/videos/The%20Los%20Angeles%20Lakers%20-%20Same%20arena.%20Same%20basket.%20Same%20dunk.%2019%20years%20apart.%20%F0%9F%92%9C%F0%9F%92%9B-1225939385515823104.mp4",
  "time": 7.212118
}

location sets what folder it should start in video is the URL for what video to play time is where you want it to start playing.

It does not autoplay by default when loaded this way on my machine.

leeuwtjex commented 8 months ago

Hi Paul, I wish you all health and hapiness for you in the new year, and I hoped you had a warm christmas.

Thanks for replying this post. Yes, I remember there was an issue around april last year, however I solved it with a workaround. As far as i remember just a iframe css thing. In the end it worked fine with your player.

Now you mention it, do have another issue now, which is directly connected to your videoplayer application I believe. On a site, I use many video's in different directories. Problem is the more video's are added in the directory, the slower the identification process gets. player.html likes to sample all video's before displaying them to the user. This takes time. For 3 video's it is not a disturbing delay. But for 8+ video's, it takes much time where the viewer just see dark frames with a spinning wheel and click away. First I thought it was an CPU issue on the server, but it is not. Is there a way to makes this procedure less complex in the script and for example just take 2 or 3 shots without analysing the cpmplete duration of the video? I think the issue is connected to the lenght of the video. The longer the playing time, the longer player.html takes to generate the demo. Is there a parameter somewhere to limit that process?

Thanks.

Dirk.

pseudosavant commented 7 months ago

Yes, the thumbnail generation can slow things down if you aren't on a very fast connection between your browser and the server.

There are a few ways to handle this:

  1. Disable thumbnail generation: click the setting gear on the right, and toggle "Generate Thumbnails" to "off". image
  2. The thumbnails can be pre-rendered on the web server for the videos: https://github.com/pseudosavant/player.html?tab=readme-ov-file#pre-rendered-server-side-thumbnails
  3. Change the thumbnail configuration in your copy of player.html to generate fewer thumbnails by setting thumbnails.timestamps to only have one timestamp value in the array. You can also set the thumbnail to be earlier in the video so that it doesn't have to seek as far into the video for the frame. Setting the array to an empty [] array will completely disable thumbnailing too.: https://github.com/pseudosavant/player.html/blob/2fa71be295eaef6218e207c8bfa9bb50455e28fa/src/player.html#L1145