【經(jīng)歷】
近日開(kāi)發(fā)遇到這么一個(gè)坑迟郎,原想用angular的ng-src對(duì)html5進(jìn)行渲染芬膝,但是視頻一直加載不了,又用了一個(gè)播放條插件祈远,使得調(diào)試變得更加艱難册倒。
一開(kāi)始懷疑是jq插件加載速度比angular內(nèi)容渲染要快(常見(jiàn)的坑),后面將插件放進(jìn)directive蚓挤,發(fā)現(xiàn)同樣沒(méi)有效果。
【問(wèn)題原因】
猜想:video在加載的時(shí)候會(huì)自動(dòng)連接src里面的東西驻子,但一開(kāi)始ng-src并沒(méi)有內(nèi)容灿意,等到ng-src渲染出內(nèi)容后,video標(biāo)簽已經(jīng)不做處理了(待君久不至崇呵,已去g途纭)。
【解決方案】
用angular指令生成video標(biāo)簽域慷。
部分代碼:
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){
/** 構(gòu)建audio節(jié)點(diǎn) **/
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("抱歉你的瀏覽器不支持播放語(yǔ)音");
element.append(audio);
doAudioJs();
stopWatch();
}
})
}
}
})
視頻正常運(yùn)行鞭执。