关于 video 视频 autoplay 播放问题及解决方法

这篇具有很好参考价值的文章主要介绍了关于 video 视频 autoplay 播放问题及解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

自动播放机制

        自动播放机制其实就是会拦截自动播放的视频。

        chrome、safari、firefox、edge 浏览器在某版本后都限制了video自动播放功能,原因为内部机制认为此视频为垃圾广告,和IOS系统一样,同时也是为客户体验度考虑,因此会限制自动播放功能。

解决办法

  • 视频静音模式允许自动播放

  • 以下几种模式下 非静音也可以自动播放

    • 客户已和当前做了交互方式 :click tap 事件

    • 客户将此网站添加到手机主桌面,就像App一样 采用PWA技术

    • 媒体参与度达到一定值后,同样可以自动播放

PWA

描述: PWA 又为(Progressive Web App,PWA),是一个使用web平台技术构建的应用程序,采用各种Web 技术将浏览器页面实现APP应用化,当然手机应用如支持PWA,可以无需下载通过PWA Web APP 添加到客户主屏幕上,快速访问全屏体验,目前PWA已支持不同操作系统和设备上运行 。

特性:离线访问、推送消息、数据同步、实时更新。

手机无网络情况下,应用的启用动画特效等其实是使用离线访问实现。

媒体参与度

客户与媒体的交互度主要从客户的观看时间、交互行为、观看率、转换率来计算 - 浏览器内部算法。

错误代码示例

  如只在video中加入autoplay 无任何错误提示 画面停留在第一帧。

  •  不使用 autoplay,在页面加载后调用 video play 方法
  •  使用 autoplay,同时调用 video play 方法才会出现错误信息

  以下代码运行会提示:play() failed because the user didn't interact with the document

  原因:提示为未与客户做交互。

  解决:可以加入弹框提示,客户交互点击播放 - JS处代码 。                

  • 自定义 DIV 弹框、ElementPlus Dialog 均可,自行选择。
<template>
  <video controls autoplay>
    <source src="@/assets/audio/testVideo.mp4" type="video/mp4" />
  </video>
</template>

<script lang="ts" setup>

   import {
    ref,
    onMounted
  } from "vue";

  onMounted(() => {
    // 此处不加 play 控制台不会出现报错
    document.querySelector("video")!.play();
  })

</script>

<style scoped lang="less">

</style>

 静音自动播放示例

  在 video 标签上添加 muted 属性

<template>
  <video controls autoplay muted>
    <source src="@/assets/audio/testVideo.mp4" type="video/mp4" />
  </video>
</template>

<script lang="ts" setup>

   import {
    ref,
    onMounted
  } from "vue";

  onMounted(() => {
    document.querySelector("video")!.play();
  })

</script>

<style scoped lang="less">

</style>

客户交互播放示例

 此处仅实现交互方式,样式自行编写。

<template>
  <button @click="play">开始播放</button>
  <video controls autoplay>
    <source src="@/assets/audio/testVideo.mp4" type="video/mp4" />
  </video>
</template>

<script lang="ts" setup>

   import {
    ref,
    onMounted
  } from "vue";

  const play = () => {
    let video : HTMLVideoElement = document.querySelector("video")!;
    // paused 播放状态
    if(video.paused){
        video.play();
    }
  }

</script>

<style scoped lang="less">

</style>

此帖查阅了相关资料,如若对PWA感兴趣此处可快速访问,如有问题请指出,欢迎讨论。文章来源地址https://www.toymoban.com/news/detail-762187.html

到了这里,关于关于 video 视频 autoplay 播放问题及解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包