简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - vue 2.0 video tag, the url is obtained through ajax, and the video linked using v-bind:src="" cannot be played
迷茫
迷茫 2017-06-12 09:31:32
0
2
1315

vue 2.0 video tag, use v-bind:src="" to link the video url, and the url is obtained from ajax in the database after the page is loaded. The page is successfully rendered, but the video cannot Play.

network did not link to load this video.

The page is successfully rendered. If you directly put the following code into an ordinary html file, it can be played successfully. 

<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>

source code:

                <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>

The project was written in vue 1.0 before. It was recently upgraded to vue 2.0 due to reconstruction. Before, vue 2.0 used {{}} to bind. Vue 2.0 has removed this binding method and can only use: src. Please ask God to answer this question.

The reason for my personal test is that the url cannot be played normally because ajax returns it. After setting the attribute value of the commentVideo object in data, it can be played, but if ajax obtains the data and then assigns it, it cannot be played.

迷茫
迷茫

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

reply all(2)
習慣沉默
習慣沉默2017-06-12 09:33:32 2 floor

Okay, friend, take a look, the network speed is a bit slow, I’d better give you a screenshot
Of course, it’s also possible that you didn’t trigger the change of the vue view after getting the url.

This is the supplementary code, the same reason

<!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>
Like +0
Add Reply
阿神
阿神2017-06-12 09:33:32 1 floor

Maybe your initialization code is in ready, vue2’s ready is called mounted

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！