iandevlin.github.io
iandevlin / iandevlin.github.io Goto Github PK
View Code? Open in Web Editor NEWLicense: GNU Affero General Public License v3.0
License: GNU Affero General Public License v3.0
iandevlin.github.io
I found a way to switch between inline and fullscreen video on iOS since they added a playsinline attribute to safari mobile from iOS 10 and up.
https://webkit.org/blog/6784/new-video-policies-for-ios/
The video would have these attributes:
<video playsinline webkit-playsinline></video>
When clicking the fullscreen button on iOS you would:
vid.removeAttribute('playsinline');
vid.removeAttribute('webkit-playsinline');
vid.play();
Then when you detect the fullscreen closing:
document.addEventListener('fullscreenchange', function() {
if (!isFullScreen ()) {
vid.setAttribute('playsinline', '');
vid.setAttribute('webkit-playsinline', '');
}
}
Hi!
first of all, thank you for this awesome player.
I've got some issue: when I try to play Hebrew subtitles, It shows only "???" instead of text (for example: "טקסט לדוגמה" - translation from hebrew: "Example Text")
I tried to change the page charset to WINDOWS-1255 but still "???" and even tried to convert the hebrew into unicode and then it showed as &#[...];
How can I fix this? can you help me?
Thanks again, this is really awesome! 👍
When I would use your player files in my repository to reproduce your player, the view source code would return a 404 whenever I would clicked on a subtitle.
So to better mimic the action in your player, I shortened the folder name subtitles/vtt ,which would automatically add a vtt folder to the repository (unlike your repository, which added no vtt file) , to plain subtitles, and still the view source delivered a 404 for each subtitle.
So I linked directly to your repository's raw subtitle files, and no 404s, but player's subtitles still not working.
Can I just check - I'm assuming that this code is open licensed per https://developer.mozilla.org/en-US/docs/MDN/About#Copyrights_and_licenses - have I got that right? I couldn't see anything explicit...
Joe
Custom controls bar is cannot be toggled in full screen mode in Chrome (not sure about other browsers at the moment). It looks to be some quirky z-index by the "video:-webkit-full-screen" user agent Chrome style sheet. I have for some hours try to add new positioning and z-indexing to parents its and the controls without any luck of getting the controls bar z-index to be higher that the video to make it interactive. Please let me know if there is so solution you can help with.
You can replicate the issue but clicking fullscreen mode here and then trying to toggle the custom control bar options. http://iandevlin.github.io/mdn/video-player/
Assuming because using the HTML code on multiple elements in the page creates duplicate IDs?
Is there a way to have this style the icons of ALL instances on the page by using GetElementsByClassName rather than GetElementByID?
I downloaded the proper files from the video-player-with-captions folder. I reproduced your player.
The captions won't work from my Github account (https://peggysuechan.github.io/video-player-with-captions/) nor from files saved on my computer, no from my reproduction of the player in Blogger (https://iandevlinnewest.blogspot.com/).
Perhaps subtitles work from only your Github site.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.