Question

HTML查看

<audio ng-src="{{vm.videourlsce}}" autoplay preload="auto" controls="controls" autobuffer></audio>

我的控制器内部使用$ http服务从移植服务器获取数据并更新到播放器

var vm = this;
vm.videourlsce = '';
$http.get(SERVER.apiurl+"resources/get_resource/?id="+$stateParams.id)    
.success(function(response){                    
     vm.resources = response.resource;                                          
     vm.videourl = vm.resources.url;                                                                          

}).error(function(error){                    
    console.log("Resources error");
});
$scope.$watch('vm.videourl', function(newVal, oldVal){
   if (newVal !== undefined) {
       console.log("Old Val => "+oldVal);
       console.log("New Val => "+newVal);
       vm.videourlsce = $sce.trustAsResourceUrl(newVal);  
   }
});

获得服务响应后，音频URL绑定到src属性上的音频标签并播放音频。但控制措施不起作用。当我从音频标签中删除自动播放选项时，什么都不会发生。单击播放按钮时，这些控件无效。

当我对此URL进行硬编码而不是从服务获取时，它可以正常工作。有人帮忙吗？

Answer 1

浏览器错误地处理audio来源的更改可能会出现问题。试试这个解决方法。

<div data-ng-if="vm.videourlsce">
    <audio ng-src="{{ ::vm.videourlsce }}" autoplay preload="auto" controls="controls" autobuffer></audio>
</div>

更新

在OP提供了codepen之后，问题变得很明显，问题在于离子拦截点击和触摸事件。通过在节点上设置属性data-tap-disabled="true"可以轻松修复它。

<div data-ng-if="videourl" data-tap-disabled="true" class="item item-body no-padding">
    <audio autoplay preload="auto" controls="controls" autobuffer>
        <source src="{{ ::videourl }}" type="audio/mpeg"/>
    </audio>
</div>

Updated codepen

通过$ http服务使用AngularJs的HTML5音频播放器

1 个答案:

更新