在HTML中,我们可以使用
<video>
标签来插入本地视频,以下是详细的步骤和代码示例:,1、我们需要在HTML文件中创建一个
<video>
标签,这个标签有一个
src
属性,用于指定视频文件的路径,如果我们的视频文件名为”myVideo.mp4″,并且它位于与HTML文件相同的目录中,那么我们可以这样写:,在上述代码中,
width
和
height
属性用于设置视频的宽度和高度。
controls
属性添加了播放、暂停和音量控制。
<source>
标签指定了视频文件的路径和类型,如果浏览器不支持
<video>
标签,或者不支持指定的视频类型,那么将显示
<source>
标签中的文本。,2、如果你想更换视频,你只需要更改
<source>
标签的
src
属性即可,如果你有另一个名为”myNewVideo.mp4″的视频文件,你可以这样写:,3、你也可以添加多个
<source>
标签,以便为不同的浏览器提供不同的视频格式,你可以同时提供MP4和WebM格式的视频:,在上述代码中,第一个
<source>
标签是为支持MP4格式的浏览器准备的,第二个
<source>
标签是为支持WebM格式的浏览器准备的,如果浏览器不支持任何一种格式,那么将显示
<source>
标签中的文本。,4、你可以使用JavaScript来动态更换视频,你可以创建一个下拉列表,让用户选择要播放的视频:,你可以使用以下JavaScript代码来更换视频:,在上述代码中,我们首先获取了下拉列表和视频元素,我们添加了一个事件监听器,当用户更改下拉列表的值时,就会触发这个监听器,在监听器的函数中,我们获取了用户选择的视频路径,并将其设置为视频元素的
src
属性,这样,每次用户更改下拉列表的值时,视频就会更换。,
,<video width=”320″ height=”240″ controls> <source src=”myVideo.mp4″ type=”video/mp4″> Your browser does not support the video tag. </video>,<video width=”320″ height=”240″ controls> <source src=”myNewVideo.mp4″ type=”video/mp4″> Your browser does not support the video tag. </video>,<video width=”320″ height=”240″ controls> <source src=”myVideo.mp4″ type=”video/mp4″> <source src=”myVideo.webm” type=”video/webm”> Your browser does not support the video tag. </video>,<select id=”videoSelect”> <option value=”myVideo.mp4″>Video 1</option> <option value=”myNewVideo.mp4″>Video 2</option> </select> <video id=”myVideo” width=”320″ height=”240″ controls></video>,document.getElementById(‘videoSelect’).addEventListener(‘change’, function() { var video = document.getElementById(‘myVideo’); video.src = this.value; });
更改html
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《更改html》
文章链接:https://zhuji.vsping.com/333123.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
文章名称:《更改html》
文章链接:https://zhuji.vsping.com/333123.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。