html5如何实现自动播放视频

 我来答
雅涵公主
高粉答主

推荐于2019-10-11 · 醉心答题,欢迎关注
知道小有建树答主
回答量:148
采纳率:100%
帮助的人:7.7万
展开全部

我们使用html5的video标签,可以不依赖于任何第三方的插件或控件,直接在浏览器中实现视频播放功能。

  1. 在了解了video标签之后,下面我们就使用html5的video标签来实现视频播放。

  2. 现在,我们打开浏览器,看一看具体的效果:

  3. 为了更好地兼容各种浏览器,你可以为一个video标签添加多个source子标签,每个source标签引用一个不同格式的视频文件。这样,html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放,从而实现兼容多个浏览器的视频播放功能。

注:html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件,暂不支持其他格式的视频文件。此外,不同的html5浏览器支持的视频文件格式也略有不同,这种状况可能会在未来的html5中得以改善。

一诺动画
2024-10-19 广告
动画短视频制作是我们北京一之诺文化传媒有限公司的强项之一。我们团队汇聚了创意策划、原画设计、动画制作及后期剪辑的专业人才,致力于为客户打造高品质、富有趣味性和故事性的动画短视频。从概念构思到成品发布,我们全程精心打磨,确保每一帧都充满活力与... 点击进入详情页
本回答由一诺动画提供
QINYANGJIE1
推荐于2019-11-15 · TA获得超过1.6万个赞
知道答主
回答量:138
采纳率:0%
帮助的人:7.2万
展开全部

HTML5 是下一代的 HTML, 提供了展示视频的标准,规定了一种通过 video 元素来包含视频的标准方法。

纯H5页面在手机端中是无法实现自动播放,移动端浏览器大部分是禁用video和audio的autoplay功能并且,很多移动浏览器也不支持首次js调用play方法进行播放(只有用户手动点播放后暂停,然后用代码进行play可以)。

这样做主要是为了防止不必要的自动播放浪费流量。

以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放

XML/HTML Code复制内容到剪贴板

  • function autoPlayMusic() {   

  • /* 自动播放音乐效果,解决浏览器或者APP自动播放问题 */   

  • function musicInBrowserHandler() {   

  • musicPlay(true);   

  • document.body.removeEventListener('touchstart', musicInBrowserHandler);   

  • }   

  • document.body.addEventListener('touchstart', musicInBrowserHandler);   

  • /* 自动播放音乐效果,解决微信自动播放问题 */   

  • function musicInWeixinHandler() {   

  • musicPlay(true);   

  • document.addEventListener("WeixinJSBridgeReady", function () {   

  • musicPlay(true);   

  • }, false);   

  • document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);   

  • }   

  • document.addEventListener('DOMContentLoaded', musicInWeixinHandler);   

  • }   

  • function musicPlay(isPlay) {   

  • var media = document.getElementById('myMusic');   

  • if (isPlay && media.paused) {   

  • media.play();   

  • }   

  • if (!isPlay && !media.paused) {   

  • media.pause();   

  • }   

  • }  

Video有以下的属性。

height      pixels     设置视频播放器的高度。

loop       loop       如果出

现该属性,则当媒介文件完成播放后再次开始播放。

preload     preload     如果出现该属性,则视频在页面加载时进行加载,并预备播放。

autoplay    autoplay    如果出现该属性,则视频在就绪后马上播放。

controls    controls    如果出现该属性,则向用户显示控件,比如播放按钮。

如果使用 "autoplay",则忽略该属性。

src              url    要播放的视频的 URL。

width           pixels    设置视频播放器的宽度。

其中,如果想要实现自动播放,可以在Video里面加上autoplay属性就可以了。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
jack观天下
推荐于2017-09-23 · 带你看天下趣闻,有意思的视频!
jack观天下
采纳数:832 获赞数:3143

向TA提问 私信TA
展开全部

HTML5 是下一代的 HTML, 提供了展示视频的标准,规定了一种通过 video 元素来包含视频的标准方法。


Video有以下的属性。

autoplay    autoplay    如果出现该属性,则视频在就绪后马上播放。    

controls     controls    如果出现该属性,则向用户显示控件,比如播放按钮。    

height        pixels    设置视频播放器的高度。    

loop           loop    如果出现该属性,则当媒介文件完成播放后再次开始播放。    

preload      preload    如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src              url    要播放的视频的 URL。    

width           pixels    设置视频播放器的宽度。    


其中,如果想要实现自动播放,可以在Video里面加上autoplay属性就可以了。以下是例子。

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls" autoplay>
  <source src="/i/movie.ogg" type="video/ogg">
  <source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
出来驾到的新生
推荐于2019-11-18 · TA获得超过998个赞
知道答主
回答量:22
采纳率:0%
帮助的人:6503
展开全部

HTML5 是下一代的 HTML, 提供了展示视频的标准,规定了一种通过 video 元素来包含视频的标准方法。 

Video有以下的属性。

autoplay    autoplay    如果出现该属性,则视频在就绪后马上播放。    

controls     controls    如果出现该属性,则向用户显示控件,比如播放按钮。    

height        pixels    设置视频播放器的高度。    

loop           loop    如果出现该属性,则当媒介文件完成播放后再次开始播放。    

preload      preload    如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src              url    要播放的视频的 URL。    

width           pixels    设置视频播放器的宽度。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
沐晓西
2014-10-28
知道答主
回答量:8
采纳率:0%
帮助的人:7.9万
展开全部
加上autoplay="autoplay"即可
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(5)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式