HTML5 切换播放的video,图片切换

1.图片切换

//将img中src修改后图片就将修改
//H5
<img id="img" src="img/1.jpg" >
//JS
var img = document.getElementById("img");
img.setAttribute("src", "img/2.jpg");

  

2.video播放的视频仿照图片进行切换--失败

//1.仿照图片切换,修改后播放的视频没有改变
//H5
<video id="video" width="600" height="" controls="controls" >
<source id="videoPlaySrc" src="movie.mp4" type="video/mp4"></source>
</video>

//JS
document.getElementById("videoPlaySrc").setAttribute("src", "320x240.ogg");
document.getElementById("videoPlaySrc").setAttribute("type", "video/ogg");
document.getElementById("video").play();

3.video下一个成功

//H%
<video id="video" width="600" height="" controls="controls" >
				<source id="videoPlaySrc" src="movie.mp4" type="video/mp4"></source>
</video>

//JS 直接给video的src赋值,就可以改变要播放的视频
document.getElementById("video").src="320x240.ogg";

  

总结:

  1.video播放的视频是它自己属性中的src,不是它的子元素中的第一个<source>中的内容。

  2.document获取到标签后能直接修改标签的属性,并及时的反馈到显示的页面中。

  

  

原文地址:https://www.cnblogs.com/liuyj-vv/p/9517712.html

时间: 2024-10-06 00:22:17

HTML5 切换播放的video,图片切换的相关文章

基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效

今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图如下: 在线预览   源码下载 HTML结构 该图片切换特效的HTML结构中,第一个元素是SVG图形,当切换图片时,它将从一个规则的矩形变为一个被压缩的矩形. <div class="stack"> <ul id="elasticstack" clas

10款jQuery+CSS3实现的多种图片切换焦点图

1.js实现的七屏百叶窗焦点图动态特效 可以实现可以同时显示很多找竖行百叶窗效果的缩略图,代码,鼠标悬浮在一张缩略图上时,该图片就在原位置变亮并慢慢展开,同时两边的缩略图就往两边缩小靠近,需要此种焦点图效果的朋友们可以前来下载使用. 在线演示 源码下载 2.jQuery+CSS3实现的多种图片切换方式简易焦点图 今天要来分享一款简易的jQuery+CSS3焦点图应用,这款焦点图应用的图片切换方式非常丰富,而且焦点图的切换按钮比较小,图片篇幅占据比较大,因此总体比较大气. 在线演示 源码下载 3.

jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的banner图片切换效果. 写法很简单,网页初学者们或者wenbapp初学者们可以拿去学习学习,也可以在这基础上加上手机的图片滑动切换效果.废话不多说,下面说说这个简单的图片切换的效果吧! 首先以下是图片切换的效果图:   图片切换效果html内容: <div class="tyna2"&

Flash焦点图片切换代码

焦点flash代码,这次给大家奉献的是Flash焦点图片切换代码,这个效果比较好,大家可以选择合适的自己使用.同时推荐Flash图片切换特效,Flash图片切换效果,Flash图片幻灯片代码,四屏图片切换代码,不间断图片左右滚动代码大家可以看看,个人感觉效果更好. Flash焦点图片切换代码主要功能: 1.可以读取xml设置播放列表 2,可以不使用xml将图片地址直接写网页中直接 3,可以读取swf的动画格式 4,自动适应图片大小health.hljmlyfcyy.com 5,循环播放,自定义自

18款 非常实用 jquery幻灯片图片切换

1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>>          下载地址 2.jquery图片切换插件制作图片层叠缩放展示效果 jquery图片插件制作图片等比列缩放层叠样式,图片叠加展示.点击层叠最上层的图片依次点击缩放图片层叠缩放切换. 查看演示>> 下载地址 3.jquery图像幻灯片制作大小图片切换滚动展示 jquery图像幻

自动播放——幻灯片缓冲效果&amp;&amp;带Loading效果的图片切换&amp;&amp;移动效果(按轨迹移动)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

13种酷炫的html5 3D图片切换代码

jQuery 3D图片叠加css3翻转图片切换特效 html5图片3d切换幻灯片轮播特效代码 jquery 3d响应式幻灯片带左右按钮的图片滑动切换效果 jquery.slicebox酷炫的html5 3d图片轮播幻灯片切换效果 html5 css3 3D动画制作手机界面3D叠加突出动画效果 html5 3D图片网格布局点击图片3D动画弹出大图文字信息 css3 transform属性制作鼠标点击3D图片叠加动画效果 modernizr html5 jquery.windy图片类似纸被风吹走3D

直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法

摘自:http://www.uiej.com/1107.html 通常人们习惯用swf播放器来播放网络视频音频 HTML5给我们带来了很多惊喜,其中新增加的audio和video标签可以让我们更方便的在网页中播放音频和视频.video标签虽好,然而目前它却无法在旧版的IE浏览器中使用.所以一般还是用flash播放器来播放视频,例如优酷网站的插入视频的代码如下: <embed src="http://player.youku.com/player.php/sid/XNjgwMDU5MDU2/

低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频

支持低版本IE的html5播放器演示 通常人们习惯用swf播放器来播放网络视频音频 HTML5给我们带来了很多惊喜,其中新增加的audio和video标签可以让我们更方便的在网页中播放音频和视频.video标签虽好,然而目前它却无法在旧版的IE浏览器中使用.所以一般还是用flash播放器来播放视频,例如优酷网站的插入视频的代码如下: <embed src="http://player.youku.com/player.php/sid/XNjgwMDU5MDU2/v.swf" al