如何在使用 angularjs 上传视频之前在浏览器中渲染视频？

Question

我想在将视频上传到 server.I 之前在浏览器中渲染视频 angular js 中的代码。

这是我的代码 html（玉）

input(type='file' ng-file-select="readURL(this)" accept='video/*')
video(width='320', height='240', controls='')
source(id ='blah' src='#', type='video/mp4')

javascript:

$scope.readURL = (input) ->
    console.log "inside"
    if input.files and input.files[0]
        console.log 'hello'
        reader = new FileReader
        reader.onload = (e) ->
            console.log e.target.result
            $('#blah').attr('src', e.target.result)
            return

        reader.readAsDataURL input.files[0]
    return

提前致谢。

Answer 1

我猜你在这里使用了 ng-file-upload 指令，如果是这样，解决方案很简单：

html部分：

<div ng-app='theModule' ng-controller='mainCtrl'>
    <button ngf-select ng-model="files"  accept='video/*' >select video</button>
    <video controls ngf-src="files[0]" ngf-accept="'video/*'" autoplay></video>
</div>

js部分：

angular.module('theModule', ['ngFileUpload']).controller('mainCtrl', ['$scope', 'Upload', function ($scope, Upload){
}]);

如果你想监听文件变化，可以添加 ngf-change="...

Fiddle Demo