video标签手机端兼容ios和andriod

最新推荐文章于 2024-09-13 17:57:30 发布

hsia_

最新推荐文章于 2024-09-13 17:57:30 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：经验心得

本文链接：https://blog.youkuaiyun.com/songhsia/article/details/89228207

经验心得专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用HTML5的video标签实现视频的自动播放功能，并通过JavaScript控制视频的播放与暂停，适用于mp4格式及h264avc编码的视频文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

--《《防忘记录护体》》--

首先要先确定视频是mp4格式，且编码格式是h264 avc

<video autoplay="autoplay" preload="auto" name="media" webkit-playsinline playsinline class="video" id="video">
    <source src=" " type="video/mp4" />
    您的浏览器不支持 video 标签。
  </video>

preload:auto
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频

webkit-playsinline playsinline 取消全屏播放
webkit-playsinline针对ie9以下，playsinline针对ie10和ie11

点击视频停止，再点击播放

 var video=document.getElementById('video');
    video.onclick=function(){
        if(this.paused){
            this.play();
        }else{
            this.pause();
        }
    }

好处：不用写controls属性即可控制视频播放