HTML网页中添加视频的代码

2019-06-21 建站知识 浏览 手机预览
文章来源:http://www.imtr.cn/html/n241.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标签的右键功能。


(视频来源于网络,如侵犯到原作者权益,请点击下方的“问”联系站长删除)

原文地址:http://www.imtr.cn/html/n241.html
  • 如果你的问题还没有解决,可以点击页面右侧的“ ”,站长收到问题后会尽快回复解决方案到你的邮箱。
  • 创造始于问题,有了问题才会思考,有了思考,才有解决问题的方法,才有找到独立思路的可能。 —— 陶行知