Viewing HowTo - Display Chapter Markers integrated into MP4 or WebM video - Using a Video Widget ?
HowTo - Display Chapter Markers integrated into MP4 or WebM video - Using a Video Widget ?
|
User: Mark E. 8 years ago
|
|
|
I've searched in this forum and googled generally to discover how to allow one of the EW video widgets to display a video's chapter markers. I use FCPX to create video files with embedded chapter markers. These display just fine if the user downloads the MP4 and plays it in Quicktime player. You can sort-of get the VLC player to use embedded MP4 chapter markers using the VLC menu --> Playback --> Chapter --> (list of chapters to select, but only 3 characters wide). Does anyone know how to display a video file's chapter markers using a EW video player widget, so a visitor to the website can see and select from a list of chapter markers ? Chapter markers are a great user feature, especially in my case when posting long boring public meetings on local political issues. People (ok a few) actually do want to see public meeting videos when they were not able to attend in person. Our community is angry about a local elementary school remodel project. I have two-camera edited video (FCPX multi-cam) of these long meetings and I want visitors to the site to be able to go directly to the sections of the video which addresses a specific concern of theirs, without wading thru the entire 2 hour video. There has been some discussion of fancy features, including chapter markers specifically, on various "Video-for-Everybody" and "MediaElementJS" forums, but so far I have not been skillful enough to implement it in EW or on my site. Thank you. Last edit 8 years ago |
|
|
User: Roddy 8 years ago
|
|
|
According to John Dyer's Mediaelement info page, the path to the .vtt file is inserted into the video tag - after the source files - like this... <track srclang="en" kind="chapters" type="text/vtt" src="mediaelement-chapters.vtt" /> Obviously, you would need to create the video player using code injection to do this. Drag the VTT file into the Assets List and control (right) click it to copy the relative file path to paste it into the src attribute. I suppose the easy way for you to do it would be if someone added a choose button for selecting the VTT file into a widget. Do you have a copy of the MP4 Video widget? ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Mark E. 8 years ago
|
|
|
Roddy, thank-you for your reply. It is very helpful getting me looking in the right direction regarding video chapter markers. I need to study the elements you mention on my own in depth before hazarding a more informed response or an additional question. Disclosure: I began writing hand tuned assembler code in octal circa 1977, then lots and lots of C for many years (embedded systems - industrial machinery control), however, I'm only just taking my first steps in HTML, JS ..etc. A really interesting new programming world. Answering your question: I did purchase a copy of your "MP4 Video" widget and have used it on some of our webpages. When I was stumbling around earlier working on video chapter markers and other issues, I installed the "Brackets" editor to look at the code generated for my website by EW and your MP4 Video widget, which led me to look at MediaElement-JS too. Will look for FCPX forum references to VTT files and see if they can be generated by Final Cut, some 3rd-party app or must be created manually, which I am certainly willing to do if necessary for all the visitor benefits from chapter markers mentioned in my initial post on this thread. Will also study more about the code injection process you mentioned, which I imagine modifies the widget generated code by inserting mods to enable usage of VTT files. Again, much thanks, mark early (Seattle, NW corner of US) |
|
|
User: Mark E. 8 years ago
|
|
| Just purchased some more Widgets v2 and v3 to update my older v1's. Want to use the most recent versions while experimenting with video chapter markers and WebVTT files. | |
|
User: Roddy 8 years ago
|
|
|
The story so far... The VTT file is simple enough. Create it as plain text and then change the format to .vtt. Here's my file content... 1 00:06:09.000 --> 00:06:11.000 Catapult ... and the DEMO. There is a problem with the mediaelement CSS if I add more markers which I will have to take a look at when I get time. There's no need to bother about code injection. Contact Me and I will send you a modified MP4 Video widget with a control to select and insert the .vtt file. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Mark E. 8 years ago
|
|
|
Roddy, Sent a request via the above "contact me" link for the modified MP4 Video widget as your time allows. If it would help with development, happy to give feedback from my use of the modified widget and anything else learned using VTT text files to create chapter markers. If by chance I stumble upon some new variation on chapter marker generation, (JS related or some obscure standards cmte reference ...etc) I will pass the info on to you. Looked at the src code of your DEMO page and did more reading about VTT text files. Your right, reasonably straightforward to implement. Studying some MacOSX scripts that use FCPX XML files as source to extract chapter marker text and timecode references from the project video and stuff them into a VTT format text file. If anyone else viewing this thread is interested in that specifically I will post the links and process as I test it myself. |
|
|
User: Roddy 8 years ago
|
|
|
I've sent you a widget with a control for selecting the VTT file.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 8 years ago
|
|
|
You can do this for free using Miro Video Converter
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Miles G. 5 years ago
|
|
| This one doesn't seem to convert iTunes movies, I personally use the iTunes video converter for mac to help me remove drm and convert m4v to mp4 or webm: https://www.drmare.com/convert-itunes-video/convert-itunes-drm-m4v-to-webm.html | |
| Post Reply |
| You must login or signup to post. |