span标签下onclick事件,播放视频,视频是链接
时间: 2024-01-02 07:02:16 浏览: 36
你可以使用 HTML5 的 `<video>` 标签来播放视频。下面是一个使用 `<video>` 标签来播放链接视频的示例:
HTML代码:
```html
<span onclick="playVideo()">点击播放视频</span>
<!-- 视频容器 -->
<video id="videoPlayer" width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
您的浏览器不支持 HTML5 视频播放,请升级浏览器或者使用其他浏览器。
</video>
```
JavaScript代码:
```javascript
function playVideo() {
var videoLink = "video.mp4"; // 视频链接
// 获取视频标签
var videoPlayer = document.getElementById("videoPlayer");
// 修改视频源
var sourceTag = videoPlayer.querySelector("source");
sourceTag.setAttribute("src", videoLink);
// 播放视频
videoPlayer.load();
videoPlayer.play();
}
```
在这个示例中,我们使用 onclick 事件触发 playVideo 函数来播放视频。视频链接存储在 videoLink 变量中,我们在 playVideo 函数中获取视频标签,并修改它的 source 标签的 src 属性为视频链接。然后,我们使用 load 方法重新加载视频,并使用 play 方法播放视频。你可以根据需要修改视频链接和样式来实现不同的效果。需要注意的是,不同的浏览器支持的视频格式可能不同,所以我们需要提供多个视频源以保证兼容性。