1. 首页 > 经验分享

HTML网页中添加视频代码

我们在设计网站的时候,经常会遇到客户提出要在网页当中添加视频播放,我归纳了几个常用的视频播放代码及变量。

<video style="width:90%;" controls>  
<source src="movie.mp4" type="video/mp4">  
<source src="movie.ogg" type="video/ogg">  
<source src="movie.webm" type="video/webm"> 
<object data="movie.mp4" width="320" height="240">    
<embed src="movie.swf" width="320" height="240">  
</object> </video>

如果要实现自动播放:把 controls 改成这个 controls autoplay muted

标签解析:
“controls”显示视频下方的控制条
“autoplay”自动播放
“muted”默认静音

video标签默认可以下载视频,右下角有3个小点,点击后有画中画和下载视频两个功能,如果想在前端屏蔽该功能,可用controlslist配合禁止鼠标右键来实现,当然,在源代码中还是能看到视频地址的。

<video src="movie.mp4" id="vid" controls controlslist="nodownload nofullscreen noremoteplayback" oncontextmenu="return false">
您的浏览器不支持 video 标签。</video>

上面的标签controlslist="nodownload nofullscreen noremoteplayback"中,nodownload表示屏蔽下载按钮,nofullscreen表示屏蔽全屏播放按钮。

oncontextmenu="return false"则是屏蔽了video标签的右键功能。

本文由白成建博客发布,转载联系作者并注明出处:https://www.baichengjian.com/jingyanfenxiang/323.html

联系博主

在线咨询:点击这里给我发消息

微信号:bai-chengjian

工作日:8:30-17:30,节假日休息