首页 > 其他分享 >video标签未自动播放,autoplay无效的原因

video标签未自动播放,autoplay无效的原因

时间:2022-11-22 23:23:47浏览次数:80  
标签:视频 播放 video 自动播放 属性 autoplay

今天写了个页面,把视频当作背景,发现视频无法播放,具体是什么原因呢。让我们看看吧!

 

 案例:百科书网-用心传递知识! (bkbook.net)

video标签重要的属性吧~

src 要播放的视频的 URL。
autoplay 如果出现该属性,则视频在就绪后马上播放。
controls 如果出现该属性,则向用户显示控件,比如播放按钮,进度条等。
height 设置视频播放器的高度。
width 设置视频播放器的宽度。
autoplay 如果出现该属性,则视频在就绪后马上播放。 controls 如果出现该属性,则向用户显示控件,比如播放按钮,进度条等。
loop 如果出现该属性,视频播放结束会再次播放,即循环播放。
muted 静音播放。
poster 视频的封面图。
preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,该属性无效。
video不能自动播放的原因:

未加autoplay属性,或者autoplay属性为false
有的浏览器不允许非静音自动播放,如谷歌浏览器,所以要加上muted属性,才会自动播放

标签:视频,播放,video,自动播放,属性,autoplay
From: https://www.cnblogs.com/68xi/p/16916866.html

相关文章

  • BZOJ2580-[Usaco2012 Jan]Video Game
    题目描述Bessieisplayingavideogame!Inthegame,thethreeletters'A','B',and'C'aretheonlyvalidbuttons.Bessiemaypressthebuttonsinanyordersh......
  • video 属性和事件用法大全
    1、video属性<!--video不支持IE8及以下版本浏览器,支持三种视频格式:MP4,WebM和Ogg--><videosrc="test.mp4"controlswidth="400"height="300"></video><......
  • 如何将图片转为SVG格式素材用于VideoScribe?
    SVG素材不够怎么办?自己动手制作吧! 方法一、利用AI将图片转换成SVG格式素材  【点击下载】   方法二、VectorMagic (快速将图片转成SVG)【点击下载】 打开软件直接将......
  • 2022-11-21 vue+uniapp之小程序 video iphone手机 视频播放卡顿
    如题。卡一两次可以当成是视频缓存问题,可要是一直卡者不动那就是代码问题了。经测试,android和ios手机存在卡顿情况,ios较为明显一点,原因我猜测是在小程序中video这个标签在......
  • VideoProc Converter 4K 5.1版
    Mac哪款视频处理软件好用呢?VideoProc4Kformac是一款mac全能视频处理软件,VideoProc4KMac采用全新的硬件加速技术,极速转换、处理、裁剪各种分辨率的视频以及音频,简单好......
  • autohotkey video remote 遥控器
    C:\my_script\videoRemote\remoteKey.ahkGroupAdd,remoteKey,ahk_exemsedge.exeGroupAdd,remoteKey,ahk_exechrome.exeGroupAdd,remoteKey,ahk_exe哔哩哔哩.......
  • 前端 video
    1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8"/>5<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>6......
  • 2022-11-19 vue+uniapp之微信小程序 video initial-time 无效
    如题,原因:不详,个人推测是因为video没有初始化完成导致initial-time赋值不成功导致。解决方案:给video绑定一个变量,在设置初始化播放时间的时候为false,赋值后设置为true,即:<......
  • 视频播放-videojs
    视频播放-video-js组件安装yarnaddvideo.js--savenpminstallvideo.js--save代码importReact,{useEffect,useRef}from'react';importVideoJsfr......
  • xilinx ip video
    ​功能1. 双axi-stream接口输入,大分辨率axis为底图,axis为顶图。     目前输入为rbg分量输入,各分量为10bit​编辑 2.使用xilinxhls编写。资源利用率不高......