Incorporating video.js into an Angular website application

I've encountered a strange issue while attempting to integrate video.js into my angular app.

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
       width="300" height="264"
       poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
    <source src="http://d2bqeap5aduv6p.cloudfront.net/project_coderush_640x360_521kbs_56min.mp4" type='video/mp4' />
</video>

The code above works perfectly for me. However, when I set the video URL in the controller, I encounter the following error https://i.sstatic.net/IheJJ.png

Below is the code snippet of the view:

<video id="example_video_2" class="video-js vjs-default-skin" controls preload="none"
       width="300" height="264"
       poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
    <source src="{{video_link}}" type='video/mp4' />
</video>

And this is my controller:

app.controller('IndexCtrl', function ( $scope, $location, $http,$sce,$routeParams) {
angular.element(document).ready(function () {
        //$scope.getVideos();
        $scope.video_link = "http://d2bqeap5aduv6p.cloudfront.net/project_coderush_640x360_521kbs_56min.mp4";
    });

})

Could anyone help me understand why this error is occurring?

javascriptangularjsvideohtml5-videovideo.js

Answer №1

Having trouble with the src attribute in Angular? Try using ng-src instead.

<source ng-src="{{video_link}}" type='video/mp4' />

Here is an example of how I handled it in my application controller:

$scope.generateSrc = function (file, mediaType) {
    if (!!file) {
      return '/media/conversation/' + mediaType + '/' + file;
    }
};

In the template:

<video poster="{{generateSrc(mediaPoster, 'photo')}}" width="100%" height="100%" class="hzVideoPlayer" id="v_{{vId}}" preload="auto" loop>
    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
    <source ng-src="{{generateSrc(mediaUrl, 'video')}}" type="video/mp4" data-quality="high">
    <source ng-src="{{generateSrc('SD_'+mediaUrl, 'video')}}" type="video/mp4" data-quality="low">
    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
    <source ng-src="{{generateSrc(mediaUrl, 'video')}}" type="video/webm" data-quality="high">
    <source ng-src="{{generateSrc('SD_'+mediaUrl, 'video')}}" type="video/webm" data-quality="low">
    <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
    <object width="320" height="240" type="application/x-shockwave-flash" data="/media/flashmediaelement.swf">
        <param name="movie" value="/media/flashmediaelement.swf"/>
        <param name="flashvars" value="controls=true&file={{generateSrc(mediaUrl, 'video')}}"/>
        <!-- Show an image as a last resort -->
        <img ng-src="{{generateSrc(mediaPoster, 'photo')}}" width="320" height="240" title="No video playback capabilities"/>
    </object>
</video>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS Unleashed: The Art of Displaying Dynamic AJAX

Hey there, I have a concern about the best practice to show or hide an ajax loading animation while input/output operations are being performed. At present, I am managing the animation using this code: Javascript app.controller('MyController', ...

javascriptjqueryajaxangularjs

Encountering a problem during the creation of a fresh Angular 2 project

After installing AngularJs with the command npm install -g angular-cli, I encountered an error when trying to create a new project: Cannot find module 'reflect-metadata' How can I resolve this error? ...

javascriptangularjsangular-cli

Utilize jQuery to trigger video playback based on the horizontal movement of the mouse

Utilizing this jQuery script to navigate back and forth in a video as the cursor moves along the x-axis. var mouseX; $(document).mousemove( function moveFunc(e) { mouseX = e.clientX; var timV = $("#deko_vid").get(0).duration; var valV = (timV*mouseX/$(do ...

javascriptjqueryhtmlcsshtml5-video

How can I properly redirect an HTTP request to HTTPS on my Express server?

Currently, I am working on my API and have configured it to work with the HTTPS protocol using SSL. Here is the code snippet: https.createServer({ key: fs.readFileSync(certKeySSLPath), cert: fs.readFileSync(certSSLPath) }, app).listen(serverPORTHTT ...

javascriptnode.jsexpresssslhttps

Function in Typescript used for checking types and catching compilation errors from external sources

Fact: I am currently using TS version 2.3.4. I have developed a function that checks if a variable is defined (it takes the parameter variable and returns 'undefined' !== typeof variable). It's quite simple. export function IsDefined(variab ...

javascripttypescripttypescript-typingstypescript2.0

Why is the refresh endpoint generating new tokens when an outdated refresh token is used?

Greetings! I am currently utilizing two npm libraries, namely bcrypt and jsonwebtoken. I have implemented an endpoint called /refresh-token wherein I aim to generate a new set of access and refresh tokens. The process involves sending the refresh token to ...

javascriptnode.jsexpressjwtbcrypt

What is the process for declaring a member variable as an extended type in TypeScript?

Is it possible to declare a "member variable" as an "extension object" rather than a static type (without relying on an interface)? Imagine something like this pseudocode: class Foo { bar -> extends Rectangle; constructor(barInstance:IRec ...

javascriptclassinheritancetypescript

resolve CORs issue with api in express app.get( ' /* ')

Can you please explain how to retrieve data from a JSON API? server.js app.get('/*', function(req, res) { res.sendFile(path.join(__dirname, 'public', 'index.html')); }) app.get('/api', function(req, res) { ...

javascriptjsonnode.jsexpress

Is it possible to dynamically change the color of a box shadow using an event handler?

I'm currently in the process of developing an application that consists of six distinct topics organized within a flexbox structure, complete with a box-shadow effect. My objective is to dynamically alter the color of the box-shadow through an event ...

javascriptjqueryhtmlcss

"Troubleshooting issue: Module fails to reload following JSON.parse error

For QA testing purposes, we have a test page that allows our QA team to replicate server behavior by passing JSON to a mock service. Everything functions correctly when valid JSON is used, but if invalid JSON is provided, an error is returned - which is ex ...

javascriptangularjsjsonangularecmascript-6

How can I use jQuery to target elements other than the vertical scrollbar when

Here is how I am utilizing the mouseleave jquery event $(document).ready(function(){ $(document).mouseleave(function(event) { //perform a task }); }); Is there any method to prevent this event from triggering when a user scrolls ...

javascriptjqueryhtmlcss

Troubleshooting PHP and jQuery AJAX: Why is $_POST always empty?

I'm struggling to display the $_POST value in an alert box using jQuery AJAX function. However, the $_POST value from my PHP controller always turns out to be empty, resulting in an empty array in the response. My setup includes PHP version 5.5 and j ...

javascriptphpjqueryajaxforms

Incorporate React Components into a traditional HTML, CSS, and JavaScript project

Can I incorporate a React Native Component (https://www.npmjs.com/package/react-native-gifted-chat) into my vanilla JavaScript project? Is it feasible to embed a React Native component within a vanilla JavaScript project? If yes, then what is the process ...

javascriptreactjsreact-native

Babylon entities failing to run

Encountering a strange issue in my current project. I am working on a react application that incorporates Babylonjs for 3D rendering. While I am able to successfully load objects into the scene, I am facing a problem when attempting to create a PBR Materia ...

javascriptreactjsbabylonjs

Modifying the maximum value of a number field attribute in jQuery after a successful action

As I continue to learn jQuery, I encountered a situation with the following form: <form class="simple-checkout" enctype="multipart/form-data" method="POST" action="<?php echo admin_url('admin-ajax.php'); ?>"> <input type="hidd ...

javascriptphpjqueryajaxwordpress

Sending data between two elements when a jQuery event is triggered

As a JavaScript beginner, I am facing an issue where I need to push data from an h1 tag to a textarea. My website is built using WooCommerce and when a visitor clicks on a product, a chat box with the product title opens. Currently, I have successfully p ...

javascriptjqueryevents

Maintaining the position of the input cursor when using the arrow up and down keys in AngularJS directive

I am currently developing a custom "typeahead/autocomplete" directive. element.bind("keydown keypress", function (event) { if(event.which === 38 || event.which === 40) { var increment = event.which === 38 ? 1: -1; ... .. ...

jqueryangularjs

Tips for transferring HTML code to a controller

Currently facing an issue while working with MVC and attempting to store HTML code from a view in a database field. In the JS section of my MVC solution, I have the following code snippet: var data = { id_perizia: $("#id_perizia").val(), pinSessione: $("# ...

javascriptjqueryajaxasp.net-mvc

Switch the checkbox to a selection option

Is there a way to switch the selection method from checkboxes to a dropdown menu? $("input[name=koleso]:first").prop("checked", true); $('body').on('click', '.koleso label', function (e) { koles ...

javascriptjquery

Uncovering secret divs with the power of jQuery timing upon reload

Currently, I am in the process of developing a custom Wordpress theme for my blog which includes an overlay-container. When a button is clicked, this container slides in from the top and pushes down the entire page. To achieve this functionality, I am uti ...

javascriptjquerycsswordpress