Electron/AngularJS – Dynamically load video file from showOpenDialog


I’m using Angular 1.5.8 with Electron and I’m trying to start a video loader when a dialog.showOpenDialog file is selected in main.js.


click(item, focusedWindow) {
    win, {
      filters: [{
        name: 'Video files',
        extensions: ['mkv', 'avi', 'mp4']
      properties: ['openFile']
    }, (fileNames) => {
      if (fileNames === undefined) return;
      var videoFilePath = fileNames[0];
      win.webContents.send('videoFilePath', videoFilePath);


const electron = require('electron')
const ipcRenderer = electron.ipcRenderer
var app = angular.module('videoModule', []);

app.controller('videoCtrl', function($scope) {

  $scope.isVideoOpened = false;

  ipcRenderer.on('videoFilePath', function(event, arg) {
    $scope.videoPathFile = arg;
    $scope.isVideoOpened = true;



<div ng-controller="videoCtrl" ng-show="isVideoOpened">
  Here {{isVideoOpened}} Here2{{videoPathFile}}
  <video id="v1" controls tabindex="0" autobuffer>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="{{videoPathFile}}" />

When I open the video, the isVideoOpened is set to true and the videoPathFile is correct (if I open this filepath the same way in a separate window, it works).

However the file does not start buffering when I press start. What am I doing wrong?


I solved it by using ng-if instead of ng-show.

But with some details like it says here.

Basically ng-if generates a sub-scope so I need to put it in an inner tag and I also need to use ng-src.

<div ng-controller="videoCtrl" >
    <div ng-if="isVideoOpened">
        <video id="v1" controls class="videoInsert">
            <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" ng-src="{{videoPathFile}}" />

Answered By – João Pereira

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published