简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - vue 2.0 video标签，url是通过ajax获取回来，使用v-bind:src="" 链接的视频无法播放
迷茫
迷茫 2017-06-12 09:31:32
0
2
1367

vue 2.0 video标签，使用v-bind:src="" 来链接视频url，而url是在页面加载之后从数据库中ajax获取而来，页面成功渲染，可是视频无法播放。

network并没有去链接load这个视频。

页面有成功渲染，直接把下面那段代码放到普通的html文件中是能够成功播放的。

<video controls="controls" poster="http://sdkadmin.91sd.com/data/slide/1496305029.jpg"><source type="video/mp4" src="http://img-cdn.wanyouxi.com/video/20170601_mdzz_recommend_video.mp4"> <source type="video/ogg" src="http://img-cdn.wanyouxi.com/video/20170601_mdzz_recommend_video.mp4"> <source type="video/webm" src="http://img-cdn.wanyouxi.com/video/20170601_mdzz_recommend_video.mp4"> <object data="http://img-cdn.wanyouxi.com/video/20170601_mdzz_recommend_video.mp4"><embed src="http://img-cdn.wanyouxi.com/video/20170601_mdzz_recommend_video.mp4"></object> <p>很抱歉！您的浏览器不支持视频控件请更新版本/使用uc浏览器等</p></video>

源代码：

                <video controls="controls" :poster="recommendVideo.thumb_img" @click="cancelBubble()">
                    <source :src="recommendVideo.outside_url" type="video/mp4">
                    <source  :src="recommendVideo.outside_url" type="video/ogg">
                    <source  :src="recommendVideo.outside_url" type="video/webm">
                    <object :data="recommendVideo.outside_url" >
                        <embed  :src="recommendVideo.outside_url" />
                    </object>
                    <p>很抱歉！您的浏览器不支持视频控件请更新版本/使用uc浏览器等</p>
                </video>

项目之前是用vue 1.0+来写的，最近要重构就升级为vue 2.0 之前是用{{}} 来绑定的 vue 2.0去除了这个绑定方法只能用:src之后就出现了这个问题，求大神解答。

亲测原因应该是url是ajax回来才无法正常播放，在data设置好recommentVideo对象的属性值是可以播放的，可是ajax获取到数据再赋值的却不可以播放。

迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(2)
習慣沉默
習慣沉默2017-06-12 09:33:32 2 楼

可以的吧，朋友，你看看，网速有点慢，还是给你个截图吧
当然，也有可能是你取到url后没有触发vue视图的改变。

这是补充的代码，同理

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
 </head>
<body>
  <p id="main">
    <video controls="controls" :src="url">
      <source :src="url" type="video/mp4">
    </video>
  </p>
  <script>  
      var app = new Vue({
        el: "#main",
        data: {
          url: ''
        },
        methods: {
          // 模拟ajax
          loadUrl: function(){
            var _this = this;
            setTimeout(function(){
               _this.url = 'http://img-cdn.wanyouxi.com/video/20170601_mdzz_recommend_video.mp4';
            },5000);
          }
        }
      })
      console.log(app);
      app.loadUrl();
  </script>
</body>
</html>
点赞 +0
添加回复
阿神
阿神2017-06-12 09:33:32 1 楼

可能你的初始化代码在ready里面，vue2的ready叫mounted

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！