Inline webbvideo

[olajoh1]

Presentera lösning

[martent]

@olajoh1 och @martent diskuterar lösning med @hryd. Sen har vi ett möte med video-karl.

@martent kollar Brightcove-pluggen för Wordpress.

[martent]

För blogg och Komin-nyheters räkning testade jag av Brightcoves egen WP-plugg. Den har ett säkerhetshål och ökar antalet javascript-filer fyra gånger per sida så den kan vi inte använda.

Jag skrev en basal WP-plugg så att författaren kan lägga in en s.k. shortcode i sin artikel där videon ska vara, den ska se ut så här:

[bc id="4162254067001"]

ID:t får redaktören i Brightcove admin när hen lägger upp videon.

Se exempel, och i redigeringsläget @olajoh1, på: https://webapps04.malmo.se/nyheter-test/2014/08/27/hej-vintercyklist/

Jag har lagt på en stilsättning i Global Assets (test-miljöer) som gör att Brightcove-videorna blir responsiva i 16:9. Det som krävs i koden i de system som ska använda den är en container med classen bc-video-box som ligger runt videon.

VIdeo-Karl får ge oss exakt vilket spelar-ID och sånt vi ska använda, jag har använt följande kod så länge:

<div class='bc-video-box'>
  <script language='JavaScript' type='text/javascript' src='https://sadmin.brightcove.com/js/BrightcoveExperiences.js'></script>
  <object id='myExperience4162254067001' class='BrightcoveExperience'>
    <param name='bgcolor' value='#f0f0f0'/>
    <param name='playerID' value='2810881920001'/>
    <param name='playerKey' value='AQ~~,AAAArZCmTQE~,w5iz83926flwNgeVE8x1_ZgoF5t7oTGp'/>
    <param name='isVid' value='true'/>
    <param name='isUI' value='true'/>
    <param name='dynamicStreaming' value='true'/>
    <param name='wmode' value='opaque'/>
    <param name='htmlFallback' value='true'/>
    <param name='includeAPI' value='true'/>
    <param name='templateLoadHandler' value='onTemplateLoad'/>
    <param name='templateReadyHandler' value='onTemplateReady'/>
    <param name='secureConnections' value='true'/>
    <param name='secureHTMLConnections' value='true'/>
    <param name='@videoPlayer' value='4162254067001'/>
  </object>
  <script type='text/javascript'>brightcove.createExperiences();</script>
  <script type='text/javascript' src='https://sadmin.brightcove.com/js/api/SmartPlayerAPI.js'></script>

där value för @videoPlayer sätts dynamiskt.

[martent]

För Komins räkning finns det nog två varianter, en enkel och en mer ambitiös.

1. En portlet med ett admingränssnitt med ett fält där redaktören fyller i videons ID. Portleten skickar sen ut samma kod som ovan till användaren.
2. En portlet som innehåller ett sökfält där redaktören söker på videons namn och får en resultatlista där den väljer en av videorna. Portleten gör som efter att plockat upp ID:t för vald video.

Det som är mer komplext för (2) är att det kräver mer tid på att göra ett smidigt GUI och att portleten får fråga BC via dess API. API:et är rätt civilicerat.

[martent]

Det som Micke och Karl får göra med den "spelare" vi ska använda är att i slutet av videon visa relaterade videor. Detta enligt vad vi kom översen om med Micke i vintras.

[martent]

Testat i Chrome, FF, IE11 och iOS 8.3 (HTML-video).

[martent]

Lägger till dig @carlhaman så kan du lägga in länkar och så småningom video-kod i denna ticketen.

[martent]

@carlhaman skrev:

Jag har satt upp en spelare som kan användas till det mesta. De nya spelarna sätts upp i Brightcove Studio, och här är länken till just denna:

https://studio.brightcove.com/products/videocloud/players/players/ac887454-ec8b-4ffc-a530-4af5c1c8e8c7

Embedkoden för denna spelare är:

<video
  data-account="745456160001"
  data-player="ac887454-ec8b-4ffc-a530-4af5c1c8e8c7"
  data-embed="default"
  class="video-js" controls></video>

<script src="//players.brightcove.net/745456160001/ac887454-ec8b-4ffc-a530-4af5c1c8e8c7_default/index.min.js"></script>

Skall spelaren spela endast ett klipp, kan det specificeras i video-taggen (data-video-id="3613536347001"), eller om en hel spellista skall läsas in (data-playlist-id="4149366809001").

ger man videotaggen ett id kan man enkelt styra den, för att t.ex få spelaren att automatiskt gå till nästa klipp i spellistan kan det se ut så här:

<script type="text/javascript">
var videoPlayer;
videojs("myPlayerID").ready(function () {
  videoPlayer = this;
  videoPlayer.playlist.autoadvance(0);
});
</script>

Det finns såklart en uppsjö av funktioner, det mesta finns beskrivet här: http://docs.brightcove.com/en/video-cloud/brightcove-player/index.html

Jag har en spelare uppe för KF:s pausfilmer uppe på: http://player.wallenmedia.se/kfpaus/

I konsolen där kan ni testa anrop mot spelaren i konsolen. videoPlayer.playlist() ger t.ex tillbaka informationen om alla klipp, videoPlayer.playlist.next() hoppar till nästa osv.

[martent]

@olajoh1 och jag kollade på spelaren och den ser prydlig ut. Några frågor:

• Stora playknappen sitter uppe till höger. Det är lite uddag. Kan man stila om det så att den horisontellt ligger i mitten och vertikalt lite över mittaxeln?
• Social delning är inte aktiverat. På malmo.se behöver det vara aktiverat men inte på intranätet Komin.

Återkommer du @carlhaman hur det ser ut med relaterade filmer i slutet på det sätt vi ska ha på artikel- och nyhetssidor?

[carlhaman]

Ett par tankar kring spelaren, funktionsmässigt och designmässigt. I tidigare versioner så har Malmö använt sig av två spelare, en för Komin-filmer och en för publika filmer, där kominspelaren helt enkelt haft social delning avstängd. Den möjligheten finns såklart nu också.

De nya spelarna har lite nya möjligheter då det kommer till anpassning. Vill man utöka grundfunktionaliteten kan spelaren antingen utökas vid inbäddningen med fler script och css, eller ha med sig det redan från början.

Om vi tar den stora playknappen som exempel, så kan den antingen anpassas i huvudsidans css, t.ex:

    .vjs-big-play-button {
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: auto;
 }

...eller så lägger man till denna koden i brightcove studio, så att spelaren får med sig denna css som standard.

På samma sätt skulle videospelaren kunna granska sitt nuvarande medieobjekt och kolla ifall customfieldet targetgroup är satt till komin eller inte, och beroende på det aktivera social delning. (då behövs det inte flera olika spelare)

En liten fråga @olajoh1 , det är väl inte vart filmen visas som borde styra social delning, utan ifall filmen är intern eller inte (targetgroup = komin). Om en film är publik, men tittas på via Komin skall den väl ändå kunna delas?

Men detta leder mig in på relaterade klipp, om inline-spelaren skall få delas, är det då inte social delning som bör komma när filmen är slut, och inte fler videos?

Ett alternativ är att delningen kommer utanför videorutan, men då är det inte direkt inline längre.

[carlhaman]

Jag testade lite med logiken för att aktivera social delning endast ifall filmen inte är en Komin-film och det fungerar fint. Logiken skulle kunna byggas in i spelaren som ett medföljande plugin.

videojs("myPlayerID").ready(function () {
                //Kolla komin:
                this.on("loadedmetadata", function (evt) {
                    if (!eval(this.mediainfo.custom_fields.targetgroup === "Komin")) {
                        console.log('Inte en Komin-video');

                        var options = {
                            "title": this.mediainfo.name,
                            "description": this.mediainfo.description,
                            "url": "http://video.malmo.se?bctid=" + this.mediainfo.id,
                            "displayAfterVideo": true,
                            "deeplinking": false,
                            "offset": "00:00:00",
                            "services": {
                                "facebook": true,
                                "google": true,
                                "twitter": true,
                                "tumblr": true,
                                "pinterest": true,
                                "linkedin": true
                            }
                        };
                        this.social(options);
                    }
                    else {
                        console.log('Detta är en Komin-video');
                    }
                });
            });

Detta kräver då att "Social Media Plugin" är laddat (Brightcove), men det skulle som sagt kunna vara med i spelaren från början (utan att det behövs någon utökad embedkod).

Just nu är INTE social media plugin tillagt i spelaren utan behöver laddas separat för att funktionaliteten skall kunna testas:

<link href="//players.brightcove.net/videojs-social/dist/videojs-social.css" rel='stylesheet'>
<!-- Laddas direkt  efter spelaren -->
<script src="//players.brightcove.net/videojs-social/dist/videojs-social.min.js"></script>

Exempelfilmer: Komin video: 4116313334001 Publik video: 4144112584001

[martent]

Utmärkt. Jag har lagt in stilsättningen i Global Assets så att både Wordpress och Sitevision delar dem.

Vad gäller delning så kollade jag och @olajoh1 på hur det ser ut när man lagt på det: https://webapps04.malmo.se/nyheter-test/2014/08/27/hej-vintercyklist/

Det räcker med delningsikonen i kontroll-raden och att sätta 'displayAfterVideo': false annars får man inte plats med relaterade filmer i videon-boxen. Och som du säger, det är OK att ha delningsikonen om det inte är Komin-taggade filmer även om filmen visas på Komin.

Kan du lägga in den social-koden i spelaren, jag tror det är lika bra att ha den koden direkt kopplad till den.

När videon är klar är det bättre att lägga upp relaterade filmer (om det inte är startsides-spelaren). Hur får vi in dem?

[martent]

@carlhaman, jag antar att stilsättningen av kontroller i videon måste ligga i spelaren för att även styra den Flash-video som skapas för äldre enheter? Verkar osannolikt att den skulle läsa in CSS som webbsidan innhåller även om selectors pekar mot videon. Lägger du in följande för de nya spelarna?

.vjs-big-play-button {
  position: absolute;
  width: 120px;
  height: 92px;
  top: -18px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.vjs-big-play-button::before {
  margin: 36px auto;
}

.vjs-control-bar {
  font-family: 'OpenSans', 'Droid Sans', 'Verdana', 'DejaVu Sans', sans-serif;
}

[martent]

En annan fråga @carlhaman: hur sätter man ett BC-id dynamiskt för VideoJS-spelaren? I BC:s API anger de fulla URL:er till specifika media-format, men vi vill låta BC:s tjänst välja format givet ett video-id precis som när man angivit <video data-video-id='123'>:

http://docs.brightcove.com/en/video-cloud/brightcove-player/reference/api/vjs.Player.html#src-source-

Jag är ute efter nått som:

// bcVideoId har plockats från ett click-event
videojs("bc-video").ready(function () {
  videoPlayer = this;
  videoPlayer.videoId(bcVideoId); // ... typ
  videoPlayer.play();
});

[martent]

Se #284 för tillämpning på startsidor.

[carlhaman]

@martent , Det finns en funktion i spelaren som heter catalog, som kan användas för detta, den slår upp all mediaInfo om ett klipp som kan laddas in i spelaren. För att ta ditt exempel, så blir det typ:

videojs("bc-video").ready(function () {
  videoPlayer = this;
      videoPlayer.catalog.getVideo('4220390033001', function(error, video) {
        //deal with error
        videoPlayer.catalog.load(video);
      });
});

Brightcove Catalog

Kodexempel

[carlhaman]

@martent Jag väntar fortfarande på svar från Brightcove angånde de relaterade klippen. Den funktionaliteten finns inte med idag, men är under utveckling, så alternativt får jag skriva ett eget plug-in som hämtar ut den informationen. Men jag skulle få svar direkt från deras API-gäng om det är läge att vänta på deras plug-in eller inte.

Delningsikonen tillsammans med relaterade klipp beror också på hur Brightcoves förslag ser ut. Jag skall ligga på dem lite hårdare.

Angående stilinformationen så skrivs inte CSS:en in direkt i deras Studio/Player-platform utan länkas in. Så det smartaste är nog att ni lägger de stiltaggarna i en CSS hos er så länkar jag in den. Då har ni frihet att ändra och lägga till fler stiltaggar vid behov.

[martent]

Angående stilinformationen så skrivs inte CSS:en in direkt i deras Studio/Player-platform utan länkas in. Så det smartaste är nog att ni lägger de stiltaggarna i en CSS hos er så länkar jag in den. Då har ni frihet att ändra och lägga till fler stiltaggar vid behov.

Men du länkar in den i spelaren, det behövs för att den ska skapa flash-spelaren korrekt? Annars kan jag lägga den i CSS:en som laddas in på sidan.

Det bästa kring relaterade klipp och delningsikonen vore om det kan hanteras separat i spelaren och BC-admin. Då kan vi göra det här klart och release:a i Sitevision och i Nyhetes- och Blogg-tjänsterna och sen kommer den funktionaliteten till när BC ev. fått till det och du lagt in det i spelarna. Annars får vi ett onödigt stopp här projektmässigt. Vad säger @olajoh1?

[carlhaman]

CSS:en appliceras, vad jag förstått, över en eventuell flashfallback. Det är således bara videon som levereras i flash, kontrollerna är fortfarande HTML. Så om de ligger direkt på sidan, eller länkas in i spelaren är nog vilket som. Ligger den i spelaren ser spelaren likadan ut vart den än bäddas in, och ni behöver bara ändra på ett ställe för att få genomslag överallt. Men så blir det kanske för er ändå (vet inte riktigt hur ert CMS ter sig).

Appropå relationer: Det är ju inget som behöver sätta stopp för den övriga utvecklingen. Det kan absolut hanteras på BC-sidan och dyker upp när det är klart.

Jag fick precis svar från Brightcove och de kommer inte tillhandahålla något plug-in för relaterade videos. Den gamla funktionen "find_related_videos()" i media API:t (föregångaren till nuvarande CMS API:t) var redan den "decaprecated" då den egentligen bara gjorde en fritextsökning på rubriken och inte hade något med relationen mellan klippen att göra. Om man granskar vilka klipp som dyker upp som relaterade på den nuvarande videoportalen märks ganska tydligt att de oftast inte har så mycket med varandra att göra.

Vi behöver kanske ha ett litet samtal kring vad som i så fall skulle visas som relaterade klipp, alltså på vilka grunder de skall anses vara relaterade?

[olajoh1]

Vi går vidare med att vi visar delningsfunktionen efter avslutad uppspelning enligt Mårtens design.

[martent]

@carlhaman du lägger in stil av spelarknappen och delningsscriptet enligt ovan direkt i spelaren så vi har det på ett ställe. I webblösningarna länkar vi in huvud-scriptet från BC och lägger in video-taggen.

[olajoh1]

Hej Carl, när kan vi se den nya spelarknappen och delningslänkarna?

[hryd]

Inline webbvideo finns att testa här:

http://www.test.malmo.se/4.2697584314d2ed3fa91114cd.html http://komin.test.malmo.se/4.6fae280a14db498df1e5e6b.html

[martent]

Vi kan inte vänta längre på att @carlhaman ska göra sina saker. Vi gör så här istället:

1. Overrides för stilsättning av playern har jag lagt in i Global Assets och deployat i test för externa och interna tjänster.
2. Vi struntar i den specifika sociala delningen för videor. Dels är videorna nu en del av övrigt content på en sida och det är sidan man då ska dela, inte specifikt en jpeg-bild eller en video. Då slipper vi dessutom en massa Javascript från Brightcove som ska laddas ned och vi blir av med beroendet av den gamla videoportalen eller vart nu delningslänkarna skulle ha pekat.

[olajoh1]

Klar för deploy

[martent]

Stilsättning för player deployad i prod för Komin och malmo.se https://github.com/malmostad/global_assets/releases/tag/v4.1.5

[hryd]

Lade in trim på inputfältet. malmostad/sv-webbvideo-inline@e2372f45105b5f075b51f9e3e69e2bd3f202f888

[martent]

foolproof

[hryd]

Deployed i produktion. @Svempan @martent

[olajoh1]

ok