/video> 现在遇到的问题的,视频切换后要手动点击才能播放,是否可以实现切换视频后会自动播放不用手动点击 解决办法..."/>

html 中video实现切换视频自动播放

12,783次阅读
没有评论

共计 877 个字符,预计需要花费 3 分钟才能阅读完成。

需求

vue2 实现的网页中播放视频,主要代码如下:

 video :src="question.videoPath" controls object-fit="contain">/video> 

现在遇到的问题的,视频切换后要手动点击才能播放,是否可以实现切换视频后会自动播放不用手动点击

解决办法

增加 autoplay 属性就可以了。

video :src="question.videoPath" autoplay controls object-fit="contain">/video>

详细

要实现切换视频后自动播放,您需要在 元素上使用 autoplay 属性。该属性会告诉浏览器在视频加载后立即开始播放。

修改后的代码如下:

video :src="question.videoPath" controls autoplay object-fit="contain">video>

请注意,某些浏览器可能出于安全考虑而限制自动播放功能。在这种情况下,您可能需要在用户与视频进行交互后(例如,单击播放按钮)再启用自动播放。

以下是一些在不同浏览器中启用自动播放的示例代码:

Chrome

var video = document.querySelector('video');
video.addEventListener('click', function() {
  video.autoplay = true;
});

Firefox

var video = document.querySelector('video');
video.addEventListener('click', function() {
  video.muted = true;
  video.autoplay = true;
});

Safari

var video = document.querySelector('video');
video.addEventListener('click', function() {
  video.play();
});

请注意,这些代码示例仅适用于桌面浏览器。在移动设备上,自动播放通常受到更严格的限制。

原文地址: html 中 video 实现切换视频自动播放

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-10-06发表,共计877字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)