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

2024-03-29 14:30:07

Dreamweaver CC2018是最新版本的软件，html5有了一个新标签，就是video标签，如何用video标签来插入mp4格式的视频呢？

操作方法

01

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

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

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

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

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

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

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

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

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

赞 (0)

在Word2016中怎么插入本地mp4视频文件

在电脑上编辑文档的时候,想要插入视频文件,该怎么操作呢?今天就跟大家介绍一下在Word2016中怎么插入本地mp4视频文件的具体操作步骤.1. 首先打开想要编辑的Word文档,进入编辑页面后,依次点击 ...
html5教程：[3]video标签轻松添加视频

HTML5添加视频非常的简单,简单到像你平常使用聊天工具一样,下面简单介绍一下如何使用video标签添加视频,编程零基础也可以轻松实现添加视频. 操作方法 01 示例一: (复制以下代码到你的文本文 ...
Word2013文档中怎么插入网络视频?

在运用Word过程中,难免会遇到需要插入网络上的视频的情况在Word 2013插入网络上的视频的情况,这里我为大家介绍两种方法. 方法一: 1.Word 2013集成了微软自家的必应视频搜索,我们点击 ...
html5手机如何自动播放视频

HTML5 是下一代的 HTML, 提供了展示视频的标准,规定了一种通过 video 元素来包含视频的标准方法. 在html5出现之前,想要在浏览器中实现视频播放功能,就必须使用额外的插件或控件来实现 ...
在IIS服务器中怎样配置MP4视频格式

在IIS服务器中,大多数都是不支持网站插入并且播放视频的功能或插件.但是可以去配置一些在该服务器上支持视频的格式,如:mp3.mp4等. 下面就来看看在IIS服务器中是怎样配置视频格式的相关过程及步骤 ...
怎么使用ae快速的导出mp4视频

怎么使用ae快速的导出mp4视频,这里,让小编来给大家大概介绍一下,让大家知道是怎么一回事. 操作方法 01 一开始我们要打开ae软件, 这里不限制使用的版本,大致流程都是一样的. 02 新建一个合成 ...
恢复手机存储的Mp4视频文件

手机大家都不陌生,手机在生活中起到的作用很多,手机除了能拍摄视频储存在相册之外,还能保存网络上下载的视频,有时候对于我们很重要的视频在自己手误和不知情的情况下被删我们到底怎么去找回这些视频呢?接下来就 ...
腾讯视频qlv格式转换mp4视频方法（终极收藏）

大家知道,现在腾讯视频搞出了一个自己独有的qlv格式,而且只能用腾讯自己的腾讯视频软件才能播放,就算用格式工厂转换也不行,甚至用腾讯自己的播放器转换成mp4格式,也无法完全播放.可以说,不少人都被ql ...
flv格式怎么转换成mp4（把flv文件怎么转换为MP4视频）

flv格式的视频怎么转mp4?FLV 是FLASH VIDEO的简称,一种由flash发展而来的视频文件,是处理mp4外使用最广泛的视频格式之一,flv格式的视频有很多的优点,例如文件体积较小和加载速 ...