search

cloudinary / cloudinary_angular

Cloudinary Angular client library
MIT License
305 stars 228 forks source link

Angular 4.x - cl-video: not working #87

Closed darkovac closed 7 years ago

darkovac commented 7 years ago

Generated html seem to be wrong:

<cl-video _ngcontent-c16="" class="ph-cl-video" resource_type="video" ng-reflect-public-id="https://res.cloudinary.com/pla">
    <video _ngcontent_c16="" class="ph-cl-video" 
        ng_reflect_public_id="https://res.cloudinary.com/pla" 
        poster="https://.../video/upload/v1495111737/user-73/y6lc4q6wlbpdjoatezzh.mov">
        <source src="https://.../video/upload/v1495111737/user-73/y6lc4q6wlbpdjoatezzh.mov" type="video/webm">
        <source src="https://.../video/upload/v1495111737/user-73/y6lc4q6wlbpdjoatezzh.mov" type="video/mp4">
        <source src="https://.../video/upload/v1495111737/user-73/y6lc4q6wlbpdjoatezzh.mov" type="video/ogg">
    </video>
</cl-video>

Debugged cloudinary-video.component.ts:

in line 62 videoTag.content() returns:

<source src="https://.../playerhunter/image/upload/v1495467254/user-96/publish/cover.jpg" type="video/webm">
<source src="https://.../playerhunter/image/upload/v1495467254/user-96/publish/cover.jpg" type="video/mp4">
<source src="https://.../playerhunter/image/upload/v1495467254/user-96/publish/cover.jpg" type="video/ogg">

in line 64 videoTag.attributes() returns:

{
  _ngcontent_c20: "",
  class: "ph-cl-video",
  ng_reflect_public_id: "https://res.cloudinary.com/pla",
  poster: "https://.../video/upload/v1495111737/user-73/y6lc4q6wlbpdjoatezzh.mov"
}
eitanp461 commented 7 years ago

@darkovac Video seems to be working in this example - https://glitch.com/edit/#!/cloudinar-angular-sdk-video

Can you please reproduce in an online tool such as Glitch or share the source code for creating the video?

darkovac commented 7 years ago

Aha, probably these attributes are a key:

poster='{ "cloud-name": "cloudinary", "gravity": "north", "start-offset": "28", "transformation": [{"effect": "sepia", "fetch_format": "auto"}]}'
source-transformation='{ "webm": { "quality": "70"}, "mp4": { "overlay": "text:verdana_30:Greetings!" } }'
fallback-content="Your browser does not support HTML5 video tags"

We were doing it by example in readme:

  <cl-video cloud-name="my_other_cloud" public-id="watchme" secure="true" class="my-videos">
        <cl-transformation overlay="text:arial_60:watchme" gravity="north" y="20"></cl-transformation>
    </cl-video>

I'll try to with your example when I get time for that, we created quick fix by implementing our component.

eitanp461 commented 7 years ago

@darkovac I updated the glitch sample to use the same component you posted in the last comment, and added controls="true" to use the native browser video controls, and it works as expected:

<cl-video cloud-name="demo" public-id="dog" secure="true" controls="true" class="my-videos">
      <cl-transformation overlay="text:arial_60:watchme" gravity="north" y="20"></cl-transformation>
</cl-video>

If your problem persists please open a ticket with Cloudinary support at https://support.cloudinary.com/hc/en-us