uni-app video组件在H5页面中如何设置srcObject进行分享

发布于 1周前 作者 caililin 来自 Uni-App

uni-app video组件在H5页面中如何设置srcObject进行分享

需要先获取到组件video,直接获取绑定的id在uniapp中获取到的是uni-video标签，真正的标签是uni-video内包裹的video标签，要给内层的标签进行设置

```html
<video id="video-dom"></video>
```

```javascript
const vidoDom = document.querySelector('#video-dom video')
vidoDom.srcObject = stream
vidoDom.play();
```

![image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/article/20231212/4da1f03af99915346103d75e4e6cec4d.png)

Harmonyos Next教程
1 回复

在uni-app中，对于video组件在H5页面中的使用，srcObject属性通常用于设置媒体流，这在直播或实时视频通信场景中非常常见。然而，对于分享功能，srcObject并不是直接相关的属性。分享功能通常涉及到将视频内容或URL分享到其他平台，而不是直接操作video组件的srcObject属性。

不过，如果你的目的是在H5页面中通过video组件播放视频，并希望提供一个分享该视频链接的功能，你可以通过以下方式实现：

  1. 设置video组件的src属性：首先，你需要设置video组件的src属性来播放视频。

  2. 实现分享功能：然后，你可以通过JavaScript实现一个分享按钮，当用户点击时，分享视频的URL。

以下是一个简单的代码示例：

<template>
  <view>
    <video :src="videoSrc" controls></video>
    <button @click="shareVideo">分享视频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/path/to/your/video.mp4' // 替换为你的视频URL
    };
  },
  methods: {
    shareVideo() {
      const url = this.videoSrc; // 获取视频URL
      if (navigator.share) {
        // 使用Web Share API（现代浏览器支持）
        navigator.share({
          title: '分享视频',
          text: '这是一段精彩的视频，快来看看吧！',
          url: url
        })
        .then(() => {
          console.log('分享成功');
        })
        .catch((error) => {
          console.error('分享失败', error);
        });
      } else {
        // 回退到传统方式，例如复制URL到剪贴板
        navigator.clipboard.writeText(url).then(() => {
          alert('视频链接已复制到剪贴板，请手动分享');
        }).catch(err => {
          console.error('无法复制链接', err);
        });
      }
    }
  }
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

在这个示例中，video组件的src属性被设置为视频的URL。shareVideo方法检查浏览器是否支持Web Share API，如果支持，则使用它来分享视频链接；如果不支持，则回退到将视频链接复制到剪贴板的方式。

请注意，Web Share API可能不是所有浏览器都支持，因此在实际应用中，你可能需要处理不同浏览器的兼容性。此外，对于更复杂的分享需求（如分享到特定平台），你可能需要使用第三方SDK或API。

回到顶部