Is is possible to insert an mp4 video inline(ex. in the body field) using the WYSIWYG module + Media-2.x-dev and File_Entity-2.x-dev modules?

When I try, it seems as if the javascript isn't loading. The video seems to have the correct html markup.

I can currently do this with the media_youtube and media_vimeo.

CommentFileSizeAuthor
#18 insert-video-inline-2024815-17.patch380 bytesgmclelland
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

I never tried that. Can I see the output somewhere online?

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Hi Jorrit,

I'm still developing locally right now.

Here is the markup that is inserted to the wysiwyg editor:

<p>
	<video class="video-js vjs-default-skin media-element file-4-x-3-video-small" controls="controls" data-file_info="%7B%22fid%22:%22917%22,%22view_mode%22:%224_x_3_video_small%22,%22type%22:%22media%22%7D" data-setup="{}" height="240" id="videojs-917--video" preload="auto" width="320"><source src="http://mansfield:8082/sites/default/files/media/parksandrec.mp4" type="video/mp4"></video>
</p>

Here is the html code that is outputted to the page:
<video class="video-js vjs-default-skin media-element file-4-x-3-video-small" controls="controls" data-file_info="%7B%22fid%22:%22917%22,%22view_mode%22:%224_x_3_video_small%22,%22type%22:%22media%22%7D" data-setup="{}" height="240" id="videojs-917--video" preload="auto" width="320"><source src="http://mysite.com/sites/default/files/media/parksandrec.mp4" type="video/mp4"></video>

I'm guessing this is only possible with modules that insert an iframe? like media_youtube, https://drupal.org/project/oembed, and media_vimeo?

It seems other modules similar to videojs had this problem, ex. mediaelementjs and mediafront.

I'm not sure if there is a way in the media module for it to know how it should insert the needed javascript?

Mediaelementjs has an option to insert the library sitewide which sort of works, but with the mediaelementjs module there is no option to set a cover/poster image or fallback video formats. That is why I was trying this module.

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

The javascript should be added, very strange that it isn't. I never use the setup you are using, so it will take some time to reproduce the problem. What versions of the related modules are you using?

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Media-2.x-dev
File Entity-2.x-dev
Videojs-3.x-dev

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

It seems the media module inserts the HTML associated with the player when you are editing the text, not when applying a content filter later on. The javascript is not added in this way. I don't know if I can remedy this.

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented
Status: Active » Postponed (maintainer needs more info)

I have greatly improved support for the Media module in my latest commit. Wait at least 12 hours before using the next 7.x-3.x-dev version to get this improvement and let me know if it works for you.

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Hi Jorrit - just tested out the new version. It is able to play the media inserted via the wysiwyg. The javascript is loading correctly on pages with media inserted via the wysiwyg and pages without any videos at all. Great job!

Now I'm wondering, is there any way to grab the first frame of the video to display as the poster image?

Or even better, what about a setting that allows you to set a field to be used as the poster image for the video. For example, say I add a poster image field to my video file type using File Entity. Maybe there is somehow a way to set a configuration on the file display to choose that field? Just a thought...

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented
Status: Postponed (maintainer needs more info) » Fixed

I have improved that as well. For fields on nodes it already worked, but it now also works for image or file fields on file entities. After you have added a file or image field on your video file entity, you can edit the file display properties and select that field as the thumbnail source.

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Awesome! @Jorrit - me goes off to try it...

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Works great! - The only other thing I noticed is that for some reason I don't see the standard classes being added to the markup when inserted.

For instance, this is the markup I normally get when I insert an image using the wysiwyg with the media + file_entity modules:
<img height="73" width="110" alt="Soccer" class="media-element file-thumbnail-small" typeof="foaf:Image" src="http://mansfield:8082/sites/default/files/styles/thumbnail-small/public/media/_dsc4237.jpg?itok=ridGtJn-" title="">

Here is what I when using media_vimeo:

<div class="media-vimeo-video media-element file-16-x-9-video media-vimeo-1">
  <div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe class="media-vimeo-player" src="http://player.vimeo.com/video/22439234?color=" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" id="fitvid403606"></iframe></div>
</div>

Here is what I get when using media_youtube:

<div class="media-youtube-video media-element file-4-x-3-video media-youtube-1">
  <div class="fluid-width-video-wrapper" style="padding-top: 75%;"><iframe class="media-youtube-player" title="Cat Man Do - Simon's Cat" src="//www.youtube-nocookie.com/embed/w0ffwDYo00Q?wmode=opaque&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen="" id="fitvid43057">Video of Cat Man Do - Simon&amp;amp;#039;s Cat</iframe></div>
</div>

See the pattern? the top level container has classes for the file type, media-element, view mode. The view mode class is important because that is what can be used to make the images and videos responsive.

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Here is a patch I used to add the correct markup to media_vimeo https://drupal.org/node/1934632#comment-7140464

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

I am not very familiar with media and I don't know about standard classes. Can you explain which classes are standard?
The image you quoted is the stub image I insert in the wysiwyg area, because inserting a video tag at that point is not supported. On the node, you should get the normal video player. Are you not seeing that behavior?

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

The image you quoted is the stub image I insert in the wysiwyg area, because inserting a video tag at that point is not supported. On the node, you should get the normal video player. Are you not seeing that behavior?

That image is the final html output of an image inserted via the wysiwyg using the media module.

Can you explain which classes are standard?

Sure, from what I can tell either media or file_entity module adds these classes to the top level/container element:

1. type
-- example media_youtube outputs: media-youtube-video
-- example media_vimeo outputs: media-vimeo-video
-- images don't seem to output this class unless this has changed in a recent dev

2. media-element - added to all media inserted via the wysiwyg editor

3. view mode
-- example image outputs: file-thumbnail-small, thumbnail-small is the actual view mode
-- example video outputs: file-16-x-9-video, 16-x-9-video is the actual view mode

4. file-id
-- example media_youtube outputs: media-youtube-1
-- example media_vimeo with my patch outputs: media-vimeo-1

Probably the best module to look at would be the https://drupal.org/project/media_youtube -2.x-dev

Someone in irc #drupal-media might can explain it better?

Hope that helps

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

You say:

That image is the final html output of an image inserted via the wysiwyg using the media module.

So the video player is not visible when you view the node?

The module should work as follows:

When you insert a video in the wysiwyg editor, it inserts the image that that you quote. When you save the node, the image tag is replaced by the actual video embed code, which is an HTML5 video tag.

Which wysiwyg editor are you using?

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Sorry to confuse you.

When I said

That image is the final html output of an image inserted via the wysiwyg using the media module.

I wasn't referring to using the video.js module in that example. I was just showing the standard markup used when inserting an image using the media and file_entity modules with the wysiwyg module. The main thing I was trying to show was the classes that are added to each piece of media inserted.

So the video player is not visible when you view the node?

The module should work as follows:

When you insert a video in the wysiwyg editor, it inserts the image that that you quote. When you save the node, the image tag is replaced by the actual video embed code, which is an HTML5 video tag.

Which wysiwyg editor are you using?

The new media integration you added to the dev release works great, I was just hoping to see some more classes added. I'm using wysiwyg module with TinyMCE 3.5.8.

I hope that clarifies things

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

Now I understand. Please test the next -dev release and let me know if it works for you! In my experience, you have to edit the node and save it again, because the Media module saves the player HTML to the node contents or caches it somewhere.

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Haven't tested this yet, but when I viewed http://drupalcode.org/project/videojs.git/commitdiff/89eaad8fc9dc36da599..., it looks like you left a
dpm($entity);

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented
FileSize
insert-video-inline-2024815-17.patch380 bytes

Here is a quick patch to remove the dpm.

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Just tested the latest dev version. Great job, you got the media classes correct.

One thing I noticed, it looks like the height and width aren't getting the correct values when the video is output.

In my file display "4-x-3-video-small," videojs is set to width=320 height=240, but the video is output as width=640 and height=360;

One other thing I found was that there is no way to remove the height and width values from the markup, you are forced to enter a height and width on the forms. When making the video.js video responsive, you need to make sure the video doesn't have any height or width inline styles. In that case you would set the height and width to auto and then control the height and width using only css in your theme. See https://github.com/videojs/video.js/issues/213#issuecomment-18380958 for more details.

Hope that helps,

Here is the output I'm getting:

<div id="videojs-917--video" class="media-element file-4-x-3-video-small videojs-917 videojs-video video-js vjs-default-skin vjs-paused" style="width: 640px; height: 360px;"><video id="videojs-917--video_html5_api" data-setup="{}" class="vjs-tech" poster="http://mysite:8082/sites/default/files/styles/4x3_small_video/public/video-poster-images/parksandrec.jpg?itok=3IG6x-Md" preload="none" src="http://mysite:8082/sites/default/files/media/parksandrec.mp4">
  <source src="http://mysite:8082/sites/default/files/media/parksandrec.mp4" type="video/mp4">
</video><div></div><div class="vjs-poster" tabindex="-1" style="background-image: url(http://mysite:8082/sites/default/files/styles/4x3_small_video/public/video-poster-images/parksandrec.jpg?itok=3IG6x-Md);"></div><div class="vjs-text-track-display"></div><div class="vjs-loading-spinner"></div><div class="vjs-big-play-button" aria-live="polite" tabindex="0" aria-label="play video"><span></span></div><div class="vjs-control-bar"><div class="vjs-play-control vjs-control " aria-live="polite" tabindex="0"><div class="vjs-control-content"><span class="vjs-control-text">Play</span></div></div><div class="vjs-current-time vjs-time-controls vjs-control"><div class="vjs-current-time-display" aria-live="off"><span class="vjs-control-text">Current Time </span>0:00</div></div><div class="vjs-time-divider"><div><span>/</span></div></div><div class="vjs-duration vjs-time-controls vjs-control"><div class="vjs-duration-display" aria-live="off"><span class="vjs-control-text">Duration Time </span>0:00</div></div><div class="vjs-remaining-time vjs-time-controls vjs-control"><div class="vjs-remaining-time-display" aria-live="off"><span class="vjs-control-text">Remaining Time </span>-0:00</div></div><div class="vjs-progress-control vjs-control"><div aria-valuenow="NaN" aria-valuemin="0" aria-valuemax="100" tabindex="0" class="vjs-progress-holder vjs-slider" aria-label="video progress bar" aria-valuetext="0:00"><div class="vjs-load-progress"><span class="vjs-control-text">Loaded: 0%</span></div><div class="vjs-play-progress" style="width: 0%;"><span class="vjs-control-text">Progress: 0%</span></div><div class="vjs-seek-handle vjs-slider-handle" style="left: 0%;"><span class="vjs-control-text">00:00</span></div></div></div><div class="vjs-fullscreen-control vjs-control " aria-live="polite" tabindex="0"><div class="vjs-control-content"><span class="vjs-control-text">Fullscreen</span></div></div><div class="vjs-volume-control vjs-control"><div aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" tabindex="0" class="vjs-volume-bar vjs-slider" aria-label="volume level" aria-valuetext="100%"><div class="vjs-volume-level" style="width: 100%;"><span class="vjs-control-text"></span></div><div class="vjs-volume-handle vjs-slider-handle" style="left: 100%;"><span class="vjs-control-text">00:00</span></div></div></div><div class="vjs-mute-control vjs-control" aria-live="polite" tabindex="0"><div><span class="vjs-control-text">Mute</span></div></div><div class="vjs-subtitles-button vjs-menu-button vjs-control " aria-live="polite" tabindex="0" aria-haspopup="true" role="button" aria-label="Subtitles Menu" style="display: none;"><div class="vjs-control-content"><span class="vjs-control-text">Subtitles</span></div><div class="vjs-menu"><ul class="vjs-menu-content"><li class="vjs-menu-item vjs-selected" aria-live="polite" tabindex="0" aria-selected="true">subtitles off</li></ul></div></div><div class="vjs-captions-button vjs-menu-button vjs-control " aria-live="polite" tabindex="0" aria-haspopup="true" role="button" aria-label="Captions Menu" style="display: none;"><div class="vjs-control-content"><span class="vjs-control-text">Captions</span></div><div class="vjs-menu"><ul class="vjs-menu-content"><li class="vjs-menu-item vjs-selected" aria-live="polite" tabindex="0" aria-selected="true">captions off</li></ul></div></div><div class="vjs-chapters-button vjs-menu-button vjs-control " aria-live="polite" tabindex="0" aria-haspopup="true" role="button" aria-label="Chapters Menu" style="display: none;"><div class="vjs-control-content"><span class="vjs-control-text">Chapters</span></div><div class="vjs-menu"><ul class="vjs-menu-content"></ul><li class="vjs-menu-title">Chapters</li></div></div></div></div>
gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Hmm... Not sure what happened, but I deleted the video and reinserted the video and now every thing seems to work. Yay!

You still need the patch in #18

I guess the only other thing left would be the adding the ability to set the height and width to auto. I can start a new issue for that if you want?

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

The dpm() has been removed, thanks for the effort of making a patch to remove one line :) The style you're mentioning must have been added by the wysiwyg module, I don't use style for width and height, only attributes on the video tag.

You could write the following in CSS to override width and height in the inline style:

.videojs-video {
  width: auto !important;
  height: auto !important;
}

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.