Dear Chouchies!!!

Regards...

I have been doing a small quick site. It needs me to put up the client testimonial in videos.

I want:
1. To embed youtube video
or
2. Upload the video to the clients server and select it from there.

For 1:
------
I have tried working with the codes suggested, in the V1.4.

Code: Select all

<cms:repeatable name='video_testimonials' label='Video Testominials'>
     <cms:editable name='embed_video' label='Video embed code' type='textarea' no_xss_check='1' col_width='150' />
     <cms:editable name='client_name' label='Client Name' type='text' col_width='150' />
     <cms:editable name='client_desc' label='Client Description' type='nicedit' col_width='150' />
</cms:repeatable>

and shown them like:

Code: Select all

<cms:show_repeatable 'video_testimonials' >
     <article class="grid_4 alpha">
          <div class="indent-left">
               <figure class="frame2 p2"><cms:show video /></figure>
               <p class="color-4 prev-indent-bot"><cms:show client_name /></p>
               <p><cms:show client_desc /></p>
          </div>
     </article>
</cms:show_repeatable>

The output has the video, client name and client description. it is to be arranged in 3-columns in multiple rows... I have done this...

But am not able to get the video working.

Please Help!!!

[KK]

Hi,

Please see viewtopic.php?f=2&t=7104&p=9451
You can use the 'file' editable region as a repeatable field.

Hope this helps.

Dear Kamran Sir,

Greetings from GenXCoders!

Sir I used the "File" option as u suggested. But the problem is, I can't make out what link to put and where. I uploaded a video, but when i want to display it on the page it shows to me only the location of the file, but not the video. i have used a ".flv" and ".mp4" file extension.

The new code of couch is:

Code: Select all

<cms:template title='Testimonial Page - Editing' >
    <cms:repeatable name='video_testimonials' label='Video Testominials'>
         <cms:editable name='embed_video' label='Video embed code' type='file' col_width='150' input_width='100' />
        <cms:editable name='client_name' label='Client Name' type='text' col_width='150' />
         <cms:editable name='client_desc' label='Client Description' type='nicedit' col_width='150' />
     </cms:repeatable>
</cms:template>

The HTML Code to display the same is:

Code: Select all

<cms:show_repeatable 'video_testimonials' >
    <article class="grid_4 alpha">
        <div class="indent-left">
            <figure class="frame2 p2"><cms:show embed_video /></figure>
            <p class="color-4 prev-indent-bot"><cms:show client_name /></p>
            <p><cms:show client_desc /></p>
        </div>
    </article>
</cms:show_repeatable>

@Kamran Sir,

Awaiting your precious help...

[KK]

Apologies for the delay in my reply (I am going through a very busy period lately).

Coming to the topic at hand, I see that you are able to use the 'file' editable region to upload a video file from admin-panel and then retrieve its full path on the front-end.

That is all the functionality that Couch can offer.

To actually render the video on the front-end, you'll need to use some additional JS library.
There are several open-source around. This one looks good - http://www.videojs.com/

Their 'Getting started' pages has example of its usage e.g.

<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>

First test it out hard-coding the path to your video files.
If everything works, replace it with data from your 'file' editable region e.g.

<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="<cms:show my_video />" type='video/mp4' />
</video>

If any fellow Coucher reading this thread has experience with videos, please share your experience here.

Hope this helps.

Dear Kamran Sir,

No apologies PLEASE!!! Its a fact that due to CouchCMS I have been earning my bread and butter. I really am more than only thankful to you and your team to come up with such a system that can be customized according to the needs, giving the developers a full control over what needs to be coded. Also, its a pleasure that you (personally) look into replying and helping out with each of the queries for the newbie developers (Me) and expert developers.

Sir i have been working with the code you suggested. I am facing a few problems:
1. I always get the error that the MIME is missing.
2. I am unable to upload any format of video, other than the MP4 format.

Please guide me on the same.

[KK]

@genxcoders, you are welcome
I really am glad you find Couch useful.

Regarding the problem that you face, can you please PM me your template (and all required files) so that I can duplicate the issue on my system (you'll need to zip the files).

Thanks.

It's possible that your server isn't serving the right mime types. Try adding the following lines to your .htaccess file.

Code: Select all

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

EDIT: Disregard this. After more careful consideration, I don't think this is the problem.

I've never used the video.js library, but I have used the Video for Everybody code (http://camendesign.com/code/video_for_everybody) that all of these javascript HTML5 video libraries are based on. Essentially what they are doing is serving HTML5 video with a flash fallback for older browsers.

The trouble is that browser makers haven't settled on a standard that they all accept. So when using HTML5 video, you have to serve 3 different versions of your video using different codecs in order for it to work in all of the modern browsers. Plus adding the fallback to flash for older browsers (IE8 and earlier). IE9 gives some trouble, too. So there's some conditional code to deal with that.

HTML5 video can be complicated and messy. So before I get into all that, maybe you'd rather just use Youtube.

One way would be to create an editable region to hold the Youtube ID. Then on the front end copy and paste in the embed code off of Youtube, but replace the ID with a couch tag.

backend:

Code: Select all

<cms:editable name='youtube_id' label='YouTube Video ID' type='text' col_width='150' input_width='100' />

front end:

Code: Select all

<iframe width="560" height="315" src="//www.youtube.com/embed/<cms:show youtube_id />" frameborder="0" allowfullscreen></iframe>

Easy-Peasy.

[KK]

Fully agree with Tim - I think you'll be better off using YouTube.

One more consideration while trying to self-host videos (apart from the technical intricacies Tim alluded to) is bandwidth. Streaming video from your server will consume tons of bandwidth. Why incur this when YouTube offers it for free?