uniapp原生组件video播放不了抖音视频

Question

uniapp原生组件video播放不了抖音视频

控制台没有打印报错提示，在组件返回函数提示信息：打开上下文失败

视频链接地址：https://www.iesdouyin.com/share/video/7235937155615427896/?region=CN&mid=7235937221541514021&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1&from_ssr=1

请教一下，有没有实现播放抖音视频的教程，感谢！

Answer 1

该回答引用GPT：抖音视频是通过防盗链机制来保护视频资源的，因此直接使用视频链接地址是无法播放的。如果需要在uni-app中播放抖音视频，可以考虑使用第三方的抖音视频解析接口，将抖音视频解析成可用的视频链接地址，再使用uni-app原生组件video进行播放。

以下是一个使用第三方抖音视频解析接口的示例代码：

// 引入第三方抖音视频解析接口
import douyinParser from '@/utils/douyinParser'

export default {
  data() {
    return {
      videoUrl: '' // 存放解析后的视频链接地址
    }
  },
  methods: {
    // 解析抖音视频
    async parseDouyinVideo() {
      try {
        const videoInfo = await douyinParser.parse('https://www.iesdouyin.com/share/video/7235937155615427896/')
        this.videoUrl = videoInfo.videoUrl
      } catch (err) {
        console.error(err)
      }
    }
  }
}

其中，douyinParser是一个封装了抖音视频解析接口的工具类，具体实现可以参考以下代码：

import axios from 'axios'

const DOUYIN_API = 'https://www.iesdouyin.com/web/api/v2/aweme/iteminfo/'

export default {
  // 解析抖音视频
  async parse(url) {
    try {
      const response = await axios.get(DOUYIN_API, {
        params: {
          url: url
        },
        headers: {
          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299'
        }
      })
      const data = response.data
      if (data.status_code === 0) {
        const videoInfo = {
          videoUrl: data.item_list[0].video.play_addr.url_list[0]
        }
        return videoInfo
      } else {
        throw new Error('解析抖音视频失败')
      }
    } catch (err) {
      throw err
    }
  }
}

在解析成功后，将解析后的视频链接地址赋值给videoUrl，再将videoUrl传递给uni-app原生组件video进行播放即可。

需要注意的是，由于抖音视频解析接口可能会随时变更，因此需要及时更新解析接口的代码。同时，使用第三方解析接口也存在一定的风险，需要自行评估使用风险。