CMS MADE SIMPLE FORGE

AVPlayer

 

[#8885] HTML Avplayer

avatar
Created By: Dominik Lenné (dlen)
Date Submitted: 2013-01-31 18:57

Assigned To: mw (mwoods)
Resolution: Works For Me
State: Open
Summary:
HTML Avplayer
Detailed Description:
With the current version apple is out because they don't use flash.
A mixed flash/html5 version would be optimal...

We working on the new version. Tdst are going well using video.js as a base. We
to be able to release the new version in the next days.

map_196~

History

Comments
avatar
Date: 2013-02-01 00:44
Posted By: Martin Poettgen (map_1961)

Hi Martin- can u pls place the version u send me last year 4 testing in the
module download? Thankx...
      
avatar
Date: 2013-02-01 06:48
Posted By: Dominik Lenné (dlen)

supergreat.
      
avatar
Date: 2013-02-04 15:30
Posted By: mw (mwoods)

Hi Martin!
added avplayer1.6, there is no in place upgrade so users will have to export
their items, uninstall and then import the xml items.
this release is BETA and may be missing some details such as templates etc.. use
at your own risk.
      
avatar
Date: 2013-02-05 03:07
Posted By: Martin Poettgen (map_1961)

--

Additional information how 2 make it work from map_1961:
1. We tried up to today always to use a flash player as a fallback. This worked
fine for 90% of browsers and operationg systems but always failed in the one or
the other case. But we didnt't want to loose any visitor beeing unable to play
video.
We found today testing the video js solution that no more flashplayer is
required when using the video js mp4 player.

1.1. To make it work it is necessary to place this tag into the head of the
cmsms template:
---
<!--[videojs call] -->

<script src="/modules/avplayer/player/video.js" type="text/javascript"
charset="utf-8"></script>
<link rel="stylesheet" href="/modules/avplayer/player/video-js.css"
type="text/css" media="screen" title="Video JS" charset="utf-8">
--

...with /modules/avplayer/player/  is the relative path to video.js and
video-js.css files.


1.2. AVPALYER template
Comparing the browser source of several working and not working tests we came
out to this template that we call with the video:


--

<div class="video-js-box">

<video id="{$item->alias}" class="video-js vjs-default-skin" controls
preload="auto" width="{$item->parent_object->width}" 
height="{$item->parent_object->height}" poster="{$item->poster->url}"
data-setup=''>
{if $item->mp4file != ""}<source
src="{root_url}/uploads{$item->mp4file->filepath}" type="video/mp4" />{/if}
{if $item->webmfile != ""}<source
src="{root_url}/uploads{$item->webmfile->filepath}" type="video/webm" />{/if}
{if $item->ogvfile != ""}<source
src="{root_url}/uploads{$item->ogvfile->filepath}" type="video/ogg" />{/if}

</video>
</div>

--

1.3. AVPLAYER PLayer settings
We still keep the NeoLao Player in the settings field even though it is
obviously not needed anymore. But there is a nice effect of making use of the
fields for >>width<< and >>height<<: these parameters are called by the tag 
width="{$item->parent_object->width}"  height="{$item->parent_object->height}"
and effect the size of the video and poster showing on the page and playing even
in mp4 - VERY USEFULL! Especially if you want to place a video in a second
content column that may be more slim as we use to do on the papabo.com and other
sites. Using flv in the we used to call different players to meet this demand of
various sizes. This now still works!! Well done.

So far from the players site.


2.0 Video formats. 

2.1. We created only TWO video formats to make it work on all browsers and
operating system that we have access to.
A mp4 with H.264 and a ogv.

This works fine with...
WinXP: IE8, Firefox 12, recent Chrome
Win7: IE9, recebt Opera & Chrome, Firefox 12,
MacOSX 10.4.1: Safari, Firefox sorry  - older versions as we don't use Mac so
often
WebOS (HP Touchpad) browser.

2.2. MP4 file creation details: 
we use adobe premiere cs5 and this settings (note that the seetings effect the
video-js internal flash fallback ratio!!):
MP4  - H.264 
Frame width / height: 720 / 404
Pixel ratio: 16:9
Target bit rate [Mbit/s]: 1,02

2.3. OGV creation details:
For latest firefox browser there is a plugin available called firefogg. This
creates webm and ogv video files. Using this plugin in the browser you can
select souve mp4 file and settings for ogv & webm file.We used 480p preset. We
placed the files on the server and changed names and tested in the browsers what
happens. Doing this we detected that the webm file is not needed to make it work
up to now in all the browsers listed above.

As there is no plugin available to create ogv with premiere from the timeline
this is the only drop of bitterness in the whole thing. But what does it
matter...

Thats it.
      
avatar
Date: 2013-02-11 18:44
Posted By: Dominik Lenné (dlen)

Could You please post an idiot-safe how-to-upgrade-the-avplayer somewhere?
Consider CMSMS beginners trying to use or upgrade the module?
      
avatar
Date: 2013-02-12 13:15
Posted By: Martin Poettgen (map_1961)

Dominik - i'd like 2 but the issue is not that easy. 
SInce HTML5 video is up 2 date and Apple banned flash video from their systems
it's not getting easier. It needs a lot of knowledge and lot of setting stuff to
make it working with a module.
Tip: look at http://videojs.com/tag-builder/
and start with the basic code itselfe. Then start rendering your own videos in
mp4 and ogv  - read my proposals above. I started as you and now its working
fine.

If this is 2 complicated use the youtube upload and embed 2 your site - ore
place code from video.js directly.
But with a module it's much more sophisticated. You can do your own querries and
video lists.

But this takes a day or two of effort. Sorry 4 that. MAP
      
avatar
Date: 2013-02-20 11:25
Posted By: Miguel Cuesco (mascee)

Hi Martin,

1/ where can I find  "video.js" file, please? I can´t see it in installation.

2/ I don´t know, how to play MP3 files through AVPlayer.

I have last version installed + FLVplayer Maxi in uploads/FLVplayer folder.

My final template is:

<h3>{$item->name}</h3>
<div class="audio-js-box">
<audio class="audio-js vjs-default-skin" controls preload="auto"
width="{$item->parent_object->width}"  height="{$item->parent_object->height}"
data-setup=''>

{if $item->mp3file != ""}<source
src="{root_url}/uploads{$item->mp3file->filepath}" type="audio/mp3"  />{/if}
</audio>
</div>

The audio player is shown, but MP3 not plays.

HTML code from webpage is:


 <h3>Track 1</h3>
<div class="audio-js-box">
<audio class="audio-js vjs-default-skin" controls preload="auto" width="400" 
height="200" data-setup=''>

<source src="http://www.server.com/uploads/media/01-Caffeine-Danger.mp3"
type="audio/mp3"  />

</audio>
</div>

What has to be in data-setup parametr?

Thank you very much and have a nice day! ;)

      
avatar
Date: 2013-02-20 11:38
Posted By: Miguel Cuesco (mascee)

I found it and inserted code to template header, but still doesn´t work... ;-/


      
avatar
Date: 2013-02-21 10:17
Posted By: mw (mwoods)

Miguel,
if you wish to play MP3 files I would recommend using a previous version of
AVplayer 1.3.2
The latest version is geared more toward HTML 5 Video
      
avatar
Date: 2013-02-21 12:30
Posted By: Miguel Cuesco (mascee)

Yeah, it works!

...but is necessary change http://{$root_url}  to {root_url}

Thank you for help! ;)
      
avatar
Date: 2013-02-21 12:33
Posted By: Miguel Cuesco (mascee)

And just one question: is there any way how to use design of 1.6 player for
1.3.2.?
1.6 player  is much nicer! ;)

Thanks!
      
avatar
Date: 2013-02-21 12:48
Posted By: Miguel Cuesco (mascee)

Sorry, I see the parameters! OK! Great module!
      
avatar
Date: 2013-02-23 08:31
Posted By: Martin Poettgen (map_1961)

HI.
An easy way to work with audio in a player 1.6 is to render mp3 files as mp4 /
ogv video with audio only.
map_1961
      
Updates

Updated: 2013-02-04 15:34
resolution_id: 6 => 11

Updated: 2013-02-01 00:44
description: With the current version apple is out because they don't use flash. A mixed flash/html5 version would be optimal... => With the current version apple is out because they don't use flash. A mixed flash/html5 version would be optimal... We working on the new version. Tdst are going well using video.js as a base. We to be able to release the new version in the next days.
summary: add apple browser support => HTML Avplayer
resolution_id: => 6
assigned_to_id: 100 => 9541