<video style="width:100%;" 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标签的右键功能。