html5如何插入网络mp4视频?video标签怎么使用

作者:小小谷 | 创建时间: 2023-04-14
Dreamweaver CC2018是最新版本的软件,html5有了一个新标签,就是video标签,如何用video标签来插入mp4格式的视频呢?...
html5如何插入网络mp4视频?video标签怎么使用

操作方法

启动DW软件,新建一个html5网页,在顶部依次点击选择【插入】-【html】-【html5 video】。

选择html5 video后,软件会自动加入一个<video></video>标签组。

我在<video后添加src=代码,然后在双引号中输入网络mp4格式的视频链接。也可以点击【浏览】,找到自己电脑里的本地mp4格式的视频,找到后点击选择。

添加完视频链接后,可以在链接后面给视频定义宽和高,分别用width和height来定义。

然后我们按快捷键F12用浏览器查看效果,可以看到我们新建的网页已经成功加载了视频,点击左下角的播放键就可以正常观看咯。

然后我们看下最开始添加video时,里面带的一个controls代码,代表自动加载播放、暂停、全屏按钮组。如果你想让视频在打开网页时就自动播放,可以把controls改成autoplay就可以啦。

我们还可以添加各大视频平台的网络在线视频。我们打开一个视频,点击视频窗口左下角的分享按钮,点击复制视频代码。

直接把代码复制到我们网页中的body标签中,可以看到代码是<embed></embed>来实现加载视频的,也是之前的网页中普遍应用的哦。

我们按F12预览一下网页,已经在网页中加载成功视频啦。是不是很简单呢?

温馨提示

灵活利用video标签,代码简单且使用范围广哦
点击展开全文

更多推荐