Asciidoctor :: Discussion

Including Vimeo videos in a document

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

10 messages Options

xcoulon

Including Vimeo videos in a document

Hello,

I'm trying to include videos published on Vimeo.com (and later on Youtube.com as well) in an Asciidoc document (as part of a website backed with awestruct), using the following syntax:

video::http://player.vimeo.com/video/67480300[height=300, widht=400]

This generates the following HTML fragment:

<video height="300" controls="" src="http://player.vimeo.com/video/67480300">  
  Your browser does not support the video tag.
</video>

But I'd like to have something like this instead:

<iframe class="vimeo" width="400" height="300" frameborder="0" 
  allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" 
  webkitallowfullscreen="webkitallowfullscreen" 
  src="http://player.vimeo.com/video/67480300?title=0&byline=0&portrait=0">
    #document
</iframe>

As I mentionned above, I'm using awestruct and I know that the "Textile Plus" extension allows for custom markers/blocks. I was wondering if there's something similar in Asciidoctor used in combination with awestruct

Thanks
Best regards,
Xavier

asotobu

Re: Including Vimeo videos in a document

The video block by default it is rendered to html5 video tag. For now I think you can do two things:

Wait until asciidoctor-0.1.4 is relased and you can write an extension or implement your custom backend overriding behaviour of video block: https://github.com/asciidoctor/asciidoctor-backends/blob/master/slim/html5/block_video.html.slim

Creating a custom backend is very easy in Asciidoctor, you can use Haml or Slim, in https://github.com/asciidoctor/asciidoctor-backends you will find many examples.

I think that writing a custom backend would be the best solution for you.

xcoulon

Re: Including Vimeo videos in a document

Thanks for your response, Alex !

I wonder if writing a custom backend would work if I need to provide an HTML output for some videos hosted on Vimeo.com and some others on Youtube.com.

Do you know if Asciidoctor 0.1.4 is going to be ready soon ?

Thanks
Best regards,

asotobu

Re: Including Vimeo videos in a document

well yes you can do it with custom templates because you can use conditionals on template depending on a defined attribute.

See this example in Haml for deckjs template:

https://github.com/asciidoctor/asciidoctor-backends/blob/master/haml/deckjs/block_ulist.html.haml

So you can create an attribute to the video block which tells you if there is a viemo or a youtube link, and then in your template you could generate one code or other.

mojavelinux

Re: Including Vimeo videos in a document

Administrator

These are great suggestions Alex. Thanks for posting them!

To provide a little background, the video template in Asciidoctor currently matches the template in AsciiDoc. Admittedly, it's a bit narrowly focused on use case which is not really the norm at all. Most of the time when we link to a video, it's on a major service like YouTube, Vimeo and so on.

As Alex mentioned, the block macros in 0.1.4 (now in master) would allow you to put something together quite easily. You could create something like:

youtube::videoid[start="1:00", options="autoplay"]

Though, when I originally envisioned the video macro, I imagined it would be able to handle any video service. That way, we don't have tons of different macros for videos when really we are just specifying an option...the video service. Here's what I had in mind:

video::videoid[service="youtube", start="1:00", options="autoplay"]

The "service" is the central piece here. It determines which template fragment will be used to create the HTML output. Alternatively, we could use a URI scheme:

video::youtube://videoid[start="1:00", options="autoplay"]

An example slim template (based on using the service attribute) might look like:

.videoblock id=@id class=[@style,role]
- if title?
.title=captioned_title
.content

    - if attr? :service, 'youtube'
      iframe(id=@id type="text/html" width=(attr :width, 640) height=(attr :height, 480)
        src="<a href="http://www.youtube.com/embed/#{attr">http://www.youtube.com/embed/#{attr 'target'}?autoplay="#{option?('autoplay') ? 1 : 0}")

- elsif attr? :service, 'vimeo'

/ add template fo

    - else
      video(src=media_uri(attr :target) width=(attr :width) height=(attr :height)
      poster=((attr :poster) ? media_uri(attr :poster) : nil) autoplay=(option? 'autoplay')
          controls=!(option? 'nocontrols') loop=(option? 'loop'))
        |Your browser does not support the video tag.

I'd be happy to add support for YouTube and Vimeo out of the box. We just need to settle on where the service name is going to go in the macro (so we can align on a standard notation). Would you be willing to file an issue?

> Do you know if Asciidoctor 0.1.4 is going to be ready soon ?

As soon as possible. All but one of the outstanding pull requests have been merged and there are just a few minor things to cleanup. We'll most certainly have a release out by the beginning of next week.

-Dan

On Wed, Aug 21, 2013 at 11:07 AM, asotobu [via Asciidoctor :: Discussion] <[hidden email]> wrote:

well yes you can do it with custom templates because you can use conditionals on template depending on a defined attribute.

See this example in Haml for deckjs template:

https://github.com/asciidoctor/asciidoctor-backends/blob/master/haml/deckjs/block_ulist.html.haml

So you can create an attribute to the video block which tells you if there is a viemo or a youtube link, and then in your template you could generate one code or other.

If you reply to this email, your message will be added to the discussion below:

http://discuss.asciidoctor.org/Including-Vimeo-videos-in-a-document-tp492p495.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Dan Allen | http://google.com/profiles/dan.j.allen

xcoulon

Re: Including Vimeo videos in a document

Dan,

I'm pretty sure that providing custom output for videos hosted on external services such as Vimeo and Youtube is a common need for users you want to include videos in their article (I'm thinking about blog posts or project sites in particular).

So, I'm planning to open an issue and I also started working on providing you with a PR for that.
Now, I'm a bit confused with the slim template you showed as an example, because I thought the changes would need to be in backends/html5.rb

Can you confirm me where the changes need to be done ? Then I'll submit the PR ;-)

Thanks !

Best regards,
Xavier

asotobu

Re: Including Vimeo videos in a document

Hi Xavier

It is not necessary to modify html5 by default if custom template does not provide an element, the html5 is used. So if you create a custom template with only vídeo block it should work. Of course if Dan thinks that this feature should be implemented in html5 template go ahead there, but you can implement a new template as well

El divendres 23 d’agost de 2013, xcoulon [via Asciidoctor :: Discussion] ha escrit:

Dan,

I'm pretty sure that providing custom output for videos hosted on external services such as Vimeo and Youtube is a common need for users you want to include videos in their article (I'm thinking about blog posts or project sites in particular).

So, I'm planning to open an issue and I also started working on providing you with a PR for that.
Now, I'm a bit confused with the slim template you showed as an example, because I thought the changes would need to be in backends/html5.rb

Can you confirm me where the changes need to be done ? Then I'll submit the PR ;-)

Thanks !

Best regards,
Xavier

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Including-Vimeo-videos-in-a-document-tp492p508.html

To unsubscribe from Including Vimeo videos in a document, click here.
NAML

--
Enviat amb Gmail Mobile

xcoulon

Re: Including Vimeo videos in a document

Hi Alex and Dan,

I'm a bit confused now: asciidoctor repo contains the html5.rb file that outputs blocks in pure HTML5 format, while the asciidoctor-backends contains slim and haml templates (amongst others).
Now, in the context of an awestruct project where I use the asciidoctor (0.1.3) gem, where should I make the change, I guess the change should be made in asciidoctor/backends/html5.rb, shouldn't it ?

Then, for other use-cases relying on asciidoctor-backends, the change should be ported to the slim and haml templates as well, shoudn't it ?

Thanks,
Best regards,
Xavier

mojavelinux

Re: Including Vimeo videos in a document

Administrator

Xavier,

You got that exactly right. Asciidoctor provides default templates out of the box for (sort of) HTML 5 and DocBook (4.5 and 5). These templates are meant to be used for anyone who just wants it to work. They use highly optimized (and sometimes ugly) code to render as fast as possible. If the intention is to change "out of the box" output, as in this case, then you would need to hack on html5.rb (as you have done).

The support for external templates is the first, and most important, extension point in Asciidoctor. It allows users to create whatever output they want. To help them along the way, I try to keep a set of templates that match the built-in templates. I've been updating the Slim, Haml and ERB sets in asciidoctor-backends. Think of these as starting points for customization. Naturally, if a change is made to the built-in templates, then the sets in the asciidoctor-backends should be updated accordingly.

Thank you for your pull request! I've merged it in, then followed up with support for youtube as well as some other enhancements. Here's an example of a video macro as you can write it now:

video::12345[youtube, 480, 360, start=60]

As with other freshly added features, we're totally open to idea about how to improve on it.

I've cut a 0.1.4.rc.1 release of the Asciidoctor gem so you can try out the video tag and the many other enhancements. You can install it using:

gem install asciidoctor --pre

Enjoy! And thanks, again!

-Dan

On Fri, Aug 23, 2013 at 8:44 AM, xcoulon [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Hi Alex and Dan,

I'm a bit confused now: asciidoctor repo contains the html5.rb file that outputs blocks in pure HTML5 format, while the asciidoctor-backends contains slim and haml templates (amongst others).
Now, in the context of an awestruct project where I use the asciidoctor (0.1.3) gem, where should I make the change, I guess the change should be made in asciidoctor/backends/html5.rb, shouldn't it ?

Then, for other use-cases relying on asciidoctor-backends, the change should be ported to the slim and haml templates as well, shoudn't it ?

Thanks,
Best regards,
Xavier

If you reply to this email, your message will be added to the discussion below:

http://discuss.asciidoctor.org/Including-Vimeo-videos-in-a-document-tp492p512.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Dan Allen | http://google.com/profiles/dan.j.allen

mojavelinux

Re: Including Vimeo videos in a document

Administrator

In reply to this post by xcoulon

I also realized that this is going to be great for deck.js and other HTML 5-based presentations. Of course, that means updating the following template:

https://github.com/asciidoctor/asciidoctor-backends/blob/master/haml/deckjs/block_video.html.haml

Once that is done, you can have videos in your slides!

-Dan

On Sun, Aug 25, 2013 at 1:52 AM, Dan Allen <[hidden email]> wrote:

Xavier,

You got that exactly right. Asciidoctor provides default templates out of the box for (sort of) HTML 5 and DocBook (4.5 and 5). These templates are meant to be used for anyone who just wants it to work. They use highly optimized (and sometimes ugly) code to render as fast as possible. If the intention is to change "out of the box" output, as in this case, then you would need to hack on html5.rb (as you have done).

The support for external templates is the first, and most important, extension point in Asciidoctor. It allows users to create whatever output they want. To help them along the way, I try to keep a set of templates that match the built-in templates. I've been updating the Slim, Haml and ERB sets in asciidoctor-backends. Think of these as starting points for customization. Naturally, if a change is made to the built-in templates, then the sets in the asciidoctor-backends should be updated accordingly.

Thank you for your pull request! I've merged it in, then followed up with support for youtube as well as some other enhancements. Here's an example of a video macro as you can write it now:

video::12345[youtube, 480, 360, start=60]

As with other freshly added features, we're totally open to idea about how to improve on it.

I've cut a 0.1.4.rc.1 release of the Asciidoctor gem so you can try out the video tag and the many other enhancements. You can install it using:

gem install asciidoctor --pre

Enjoy! And thanks, again!

-Dan

On Fri, Aug 23, 2013 at 8:44 AM, xcoulon [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Hi Alex and Dan,

I'm a bit confused now: asciidoctor repo contains the html5.rb file that outputs blocks in pure HTML5 format, while the asciidoctor-backends contains slim and haml templates (amongst others).
Now, in the context of an awestruct project where I use the asciidoctor (0.1.3) gem, where should I make the change, I guess the change should be made in asciidoctor/backends/html5.rb, shouldn't it ?

Then, for other use-cases relying on asciidoctor-backends, the change should be ported to the slim and haml templates as well, shoudn't it ?

Thanks,
Best regards,
Xavier

If you reply to this email, your message will be added to the discussion below:

http://discuss.asciidoctor.org/Including-Vimeo-videos-in-a-document-tp492p512.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

--
Dan Allen | http://google.com/profiles/dan.j.allen

Dan Allen | http://google.com/profiles/dan.j.allen