Back to top

My video is not playing in Angular UI

Uncategorized 0 Comments

As all of us already know that Angular framework picks up assets like fonts, images, media ..etc from src/assets folder. I have created videos folder in asserts directory and placed video.mp4 media file there. From Angular project home directory here is the path of my video file src/assets/videos/video.mp4

When I tried to refer this video with the path assets/videos/video.mp4 from my Angular HTML file, the video failed to load. The network call to fetch the video file responded with “404 Not Found”. Surprisingly Angular code was fetching all the assets placed in sub folders of assets directory except this video file.

I have no clue why it failed to load my video file. After some clueless struggle and debugging I looked into .angular-cli.json file placed in project home folder.

There I noticed that assets array is holding the below content

assets”: [   “assets/fonts”,    “assets/images”,   “assets/js”,  “assets/json”,   “favicon.ico”  ]

That means we are allowing Angular project to get assets from the above specified directories alone i.e. which are part of assets array alone.

Then I added “assets/videos” to this array and re-built Angular project, boom!! my video got loaded.

To conclude my new assets array looks like this

assets”: [   “assets/fonts”,    “assets/images”,   “assets/js”,  “assets/json”, “assets/videos”,  “favicon.ico”  ]

Leave a Comment

Your email address will not be published.

Please Enter Message

Please Enter Name

Please Enter Valid Email

Other Articles

By Lakshmi Sumathi

  • 20

    How to create salesforce connected apps to access the salesforce REST API calls

    A connected app defines your application’s OAuth settings for the Salesforce organisation. This will use OAuth protocols to authenticate and provide tokens for use with Salesforce APIs. In addition to standard OAuth capabilities, connected apps allow Salesforce admins to set various security policies and have explicit control over who can use the corresponding apps.

    Here are the steps to create connected apps in sales force

    Make sure that your chrome browser has “Advanced Rest Client” 

  • 31

    మౌనానికి ఎన్నో ముఖ చిత్రాలు ( various faces of silence )

    పూల రేకుల లాలిత్యాన్ని మరపిస్తుంది
    కత్తి అంచు కాఠిన్యాన్ని తలపిస్తుంది
    తృణీకార సందేశానికి ప్రతీక అవుతుంది
    ఖేదాన్ని మోదాన్ని
    రాగాన్ని ద్వేషాన్ని
    సుఖాన్ని దుఃఖాన్ని
    విషాన్ని మాధుర్యాన్ని… భాషాంతరీకరిస్తుంది.
    పలుకుది శబ్ద భాషణ, మౌనానిది నిశ్శబ్ద భాషణ.
    అనుచిత సంభాషణను తుంచి వేయగల మందు మౌనం.
    Finally మౌనేన కలహం నాస్తి.
    భాషాంతరీకరణ  =  Expressing in a different language
    తృణీకారము = Neglect
    ప్రతీక = Symbol
    ఖేదము = grief
    మోదము = Happiness
    రాగము = Affection
    అనుచిత = Improper

  • 30

    Social sharing icons are not displayed in wordpress page ?

    One of the reasons could be that your plug-in’s css file is not loaded by header.php

    When we build custom themes we edit header.php to include new css, scripts …etc.

    In our case the header.php was rewritten from scratch, so the wp_head() php function added by wordpress in header.php template was removed.

    I installed AddToAny plug-in and when I tried to get the social sharing icons by adding [addtoany] short code,

%d bloggers like this: