关于angular ng-src渲染html5 video视频

【经历】
近日开发遇到这么一个坑,原想用angular的ng-src对html5进行渲染,但是视频一直加载不了,又用了一个播放条插件,使得调试变得更加艰难。
一开始怀疑是jq插件加载速度比angular内容渲染要快(常见的坑),后面将插件放进directive,发现同样没有效果。


【问题原因】
猜想:video在加载的时候会自动连接src里面的东西,但一开始ng-src并没有内容,等到ng-src渲染出内容后,video标签已经不做处理了(待君久不至,已去!)。


【解决方案】
用angular指令生成video标签。
部分代码:

var p_a = angular.module("play_audio",[]);

p_a.directive("playAudio",function(){
  return {
      restrict: "AE",
      link: function(scope, element, attrs){

          var stopWatch = scope.$watch("article",function(newData,oldData){
              if(scope.article != undefined){
                  /** 构建audio节点 **/
                  var audio = angular.element("

"); audio.append(source); audio.append(text); audio.attr("id","myAudio"); source.attr({ "src": scope.article.content, "type": "audio/mpeg" }); text.text("抱歉你的浏览器不支持播放语音"); element.append(audio); doAudioJs(); stopWatch(); } }) } } })

视频正常运行。

你可能感兴趣的:(关于angular ng-src渲染html5 video视频)