关于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>");
                  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();
              }
          })
      }
  }
 })  

视频正常运行。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 5,555评论 0 3
  • Angular面试题 一、ng-show/ng-hide与ng-if的区别? 第一点区别是,ng-if在后面表达式...
    w_zhuan阅读 10,884评论 0 26
  • Angular 创建模块: var oneApp = angular.module("myApp",[ ] ) ...
    AkaTBS阅读 6,086评论 0 17
  • Angular 1.创建模块: var oneApp = angular.module("myApp",[ ] )...
    于晓鱼阅读 4,134评论 0 6
  • ·文艺复兴,一场群星璀璨的盛会 文艺复兴对我来说是个陌生又熟悉的概念。也许上学时学过,也许背过,但是记忆里仅存的可...
    红烧大虾阅读 3,895评论 0 1