Cannot Play Local Video (Android)

#1

Hi, I thought finally I would raise this one since it is a stubborn problem on my list of things I would like to get working properly on Tiddlywiki on my Android phone.

I use TiddlyDesktop on my laptop ( Linux Ubuntu ) and Tiddloid on my Android phone.

Quite a few of my tiddlers feature locally stored videos - often with my comments in the tiddler indicating items of interest at various timestamps in the video.

On both Deskstop and Android phone I store videos in a subdirectory called videos and images in a subdirectory called images.

Example code added to a regular tiddler

<html>
<video width='80%'  poster='videos/poster.png' controls preload='none'>
<source src='videos/myvideo.webm' type='video/webm'>
Your browser does not support the HTML 5 video tag.
</video>
</html>

So I cannot play videos on Android - most internet sources suggest it is a security measure.

I have tried different video formats and many incantations for the source attribute - I have periodically returned to this issue over the last few years - for instance some advice has been to place videos on the SD Card and access them from there - so far nothing has worked. It seems that avenues such as using the SD Card work with some phone manufacturers and not others so the extent to which the security measure is enforced seems to be variable. My phone is Huawei.

Q/ So why can my Android browser show a local HTML file with images stored locally on my phone but not be able to show locally stored videos?
A/ The explanation seems to be that Javascript is required to show videos but not images and Javascript on android devices is limited in terms of file access for security reasons which seems reasonable.

Recent workarounds I have seen involve the user using an HTML file input so that the user has to select the video to be played - Javascript is allowed access to local files on an android device if the user has selected them in a file selector - again sensible since the user has made a decision.

See for instance…

But this is far too clunky for me.

There are also suggestions of using localhost but that involves creating a server on the phone which is very involved.

I don’t particularly want to have to host the videos online, I would prefer them as local files on Android just as with my desktop Tiddlywiki.

So after a fairly lengthy tussle with this issue I wondered if anyone out there had any ideas?

As mentioned I have already tried many of the “file// SDCard workarounds” and so on.

The issue also extends to locally stored pdf files but I have not tried as many solution attempts with them as I have with the video. I noted back in 2019 domor3000 confirmed this, I suspect the same root cause for the problem.

https://groups.google.com/g/TiddlyWikiDev/c/TNebCzX5d7Y

donmor3000 says “Sorry but I’m afraid webview cannot load pdf files. I tried pdf.js and strangely it only works with online urls.”

That would fit in with the Javascript security restrictions.

I suspect therefore this all boils down to an Android limitation outside of the domain of Tiddlywiki and perhaps of Tiddloid and to compound that different manufacturers have different levels of enforcement - some are more lax when the files are on the SD card - some not.

So before I end this apparently fruitless journey I thought I would ask the question to see if anyone had any new suggestions and also to document the issue so that people who later return to this have some answers.

Thanks Jon

#2

If it helps, using RCX (essentially rclone for Android) it is extremely easy to serve a local directory over WebDAV. This would not only allow the videos to be accessed, but would also allow saving the TiddlyWiki.

1 Like
Opening a TW or any htlm file on android
Accessing media and pdf files stored in the subdirectory of TW folder in android
#3

Thanks Saqimtiaz - that was the simplest way to serve a directory on localhost I have seen. It took me a little time to find out that the server address would be http://127.0.0.1:8080 - it was the 8080 bit I was missing the RCX app did not seem to offer this info directly but later I spotted a notification on my phone which gave me the info and then it worked.

Brilliant !!!

I will need to figure out how to load the poster image for the video - the video tag has the nice feature that it allows for several sources to be given and takes the first one that is compatible and available so the following works for my desktop and my phone - I have never seen a similar multiple src choice for the poster but thanks so much this gets me a lot further along the road and poster thumbnails are not so important.

<html><video width='80%'  poster='videos/myPoster.png' controls preload='none'>
<source src='http://127.0.0.1:8080/videos/myVideo.webm' type='video/webm'>
<source src='videos/myVideo.webm' type='video/webm'>
Your browser does not support the HTML 5 video tag.
</video></html>

Great - thanks so much Jon

1 Like
#4

I am a bit surprised that the poster images are not working with relative paths when served by RCX.

Do they work if you change the path in the above example to: /videos/myPoster.png ?

Alternatively, you can use a filtered attribute to have a dynamic poster attribute.
Something like:

poster={{{ [{$:/info/url/protocol}prefix[http]then[http://127.0.0.1:8080/videos/myPoster.png]] :else[[videos/myPoster.png]] }}}

1 Like
#5

Thanks again - I will play around with your suggestions. Once I have a solution I will post here so the next person benefits. :grinning:

saqimtiaz wrote: “I am a bit surprised that the poster images are not working with relative paths when served by RCX.”

I am using tidloid which is directly accessing the locally stored file Tiddlywiki html file without using RCX, I am only using the RCX server to access the videos - therefore the “root” of my Tiddlywiki is not the “root” of what is being served by RCX so it seems sensible to me that the relative path is not working.

#6

Hi, finally got there with the poster. I could not use saqimtiaz’s suggestion exactly as is because I am not hosting the entire tiddlywiki on localhost - only the videos.
On my phone the protocol prefix is “content” so I used this in place of http - apart from that I used Saqimtiaz’s solution so many thanks. Finally videos and poster images all working on laptop (TiddlyDesktop) and android phone (Tiddloid).

poster={{{ [{$:/info/url/protocol}prefix[content]then[http://127.0.0.1:8080/videos/myPoster.png]] :else[[videos/myPoster.png]] }}}`
1 Like