local video embed

[hansv]

I want to embed flex-video from Zurb Foundation (no Youtube or Vimeo), but video stored on your own hosting server.

This is working fine (= example flex-video on Zurb Foundation site)

<div class="flex-video">

  <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>

</div>

 

When I try ' to processwire' this I get a 404-error

<div class="flex-video"s>

  <iframe width="420" height="315" src="<?php echo $config->urls->templates; ?>video/voorstelling_orgelpijpjes_2016.mp4" frameborder="0" allowfullscreen></iframe>

</div>

 

How can I refer the scource (scr) to my own mp4-video?  Suggestions are welcome

[AndZyk]

Hello hansv,

if you are hosting a video on your own webspace, you don't need an Iframe and can use the HTML5 video tag instead.

Here is an answer to your question from the Foundation forum.

[hansv]

Thx AndZyk

I also tried this, but I only see the controls, the video itself is not visible.  The problem is to refer correctly to the source

<video width="320" height="240" controls>

<source src="<?php echo $config->urls->templates; ?>video/voorstelling_orgelpijpjes_2016.mp4" type="video/mp4">

</video>

[pwired]

An iframe is for a webpage in a webpage that's why the youtube is working and your local mp4 isn't.
For a local mp4 (or webm and ogg) you have to use the html5 video format:
<video id="yourmovie" src="yourmovie.mp4" controls></video>

You have to check what video format is supported across all browsers.
I think mp4 is now supported by all modern browsers.

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

A problem with the html5 video format is that the html5 player does not look
the same across all browsers and the autoplay attribute does not work
in mobile devices like iPad and iPhone.

To make the player look the same across all browsers and also escape the autoplay
attribute problem you have to use a wrapper like this one:

http://mediaelementjs.com/

To make things even more easy you also could make use of Adriaan's video field type:
https://processwire.com/talk/topic/4580-video-fieldtype/
 

echo $page->video_field->play;

[hansv]

Thx AndZyk & pwired
 
HTML5 ->   I am unable to make the 'scr' refer to the correct path

 <video id="yourmovie" src="yourmovie.mp4" controls></video>   

Adriaans video field type is working well, except of showing an image of the video and to make it autoplay!

echo $page->videos->eq(0)->play;

[adrian]

Thx AndZyk & pwired

HTML5 ->   I am unable to make the 'scr' refer to the correct path

 <video id="yourmovie" src="yourmovie.mp4" controls></video>   

Adriaans video field type is working well, except of showing an image of the video and to make it autoplay!

echo $page->videos->eq(0)->play;

If you're using that module of mine, you currently need ffmpeg and php-ffmpeg installed to generate poster/thumbnail images. I am planning on adding the option to manually add an image at some point, but it will be much easier if your host has ffmpeg available.

As for autoplay, just edit the the play code in the module's config setting. Although I should probably add the ability to pass various options like autoplay via play()

If you want to go back to the plain html video tag, it shouldn't be hard to get the path correct. I am not sure this makes sense yet because as far as I know, you need to provide mp4 and webm versions for all modern browser support, whereas with my module and its use of mediaelementjs you can just supply an mp4. On further reading, I am actually not sure of the support for mp4 anymore. It seems contradictory between http://caniuse.com/#feat=mpeg4 and http://mediaelementjs.com/

Are the videos being uploaded via a files field? or manually uploaded to site/templates/video/ ?

<?php echo $config->urls->templates; ?>video/voorstelling_orgelpijpjes_2016.mp4

If so, then it should work fine. What is the URL that is shown when you view source?