【经历】
近日开发遇到这么一个坑,原想用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>");
var source = angular.element("<source>");
var text = angular.element("<p>");
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();
}
})
}
}
})
视频正常运行。