Javascript实现视频轮播在pc端与移动端均可
更新时间：2013年09月29日 15:13:55 作者：
用Javascript实现视频轮播，毕竟是客户的需求吗？所以尽量实现下,下面有个实现视频轮播的示例，pc端与移动端均可以实现，感兴趣的朋友可以了解下
最近客户要求用Javascript实现视频轮播:
有兴趣的同学可以参开一下
下面写了一个程序实现视频轮播，pc端与移动端均可以实现，
但移动端，存在有一点bug;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=UTF-8">
<title>Insert title here</title>
</head>
<p>视频轮播11</p>
<div id="container"></div>
<p>视频轮播22</p>
</body>
<ml>
<script type="text/javascript">
var index=0;
var arr = new Array("71da9e4b6985a7b5951dd62ce7bb020d_7", "71da9e4b691a41961dcd6524593d39ee_7", "71da9e4b69efa71be86d625508ec9feb_7");
var container = document.getElementById("container");
function printPlayer(index){
//alert(arr.length);
if(index>arr.length-1){
index=0;
}
//container.removeElement;
container.innerHTML="";
var vid=arr[index];
if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {
var video = document.createElement("video");
video.src = "http://v.polyv.net/uc/video/getMp4?vid="+vid;
video.onended=s2j_onPlayOver;
//video.addEventListener('ended',j2s_onPlayOver, false);
video.autoplay="true";
video.controls="controls"
container.appendChild(video);
}else{
var swf="http://player.polyv.net/player_polyv_20130926a.swf?vid="+vid;
container.innerHTML = "<OBJECT width='600' height='375' ><PARAM NAME=movie VALUE='"+vid+"'><param name='allowscriptaccess' value='always'>"
+"<param name='allowFullScreen' value='true' />"
+"<EMBED src='"+swf+"' width='600' height='375' TYPE='application/x-shockwave-flash' allowscriptaccess='always' allowFullScreen='true' /></EMBED>"
+"</OBJECT>";
<!-- container.innerHTML = "<OBJECT>"+swf+"</OBJECT>";-->
}
}
printPlayer(index);
/* function j2s_onplayover(){
index++;
printPlayer(index);
} */
function s2j_onPlayOver() {
alert('ssss');
index++;
printPlayer(index);
}
</script>
运行效果：
有兴趣的同学可以参开一下
下面写了一个程序实现视频轮播，pc端与移动端均可以实现，
但移动端，存在有一点bug;
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=UTF-8">
<title>Insert title here</title>
</head>
<p>视频轮播11</p>
<div id="container"></div>
<p>视频轮播22</p>
</body>
<ml>
<script type="text/javascript">
var index=0;
var arr = new Array("71da9e4b6985a7b5951dd62ce7bb020d_7", "71da9e4b691a41961dcd6524593d39ee_7", "71da9e4b69efa71be86d625508ec9feb_7");
var container = document.getElementById("container");
function printPlayer(index){
//alert(arr.length);
if(index>arr.length-1){
index=0;
}
//container.removeElement;
container.innerHTML="";
var vid=arr[index];
if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {
var video = document.createElement("video");
video.src = "http://v.polyv.net/uc/video/getMp4?vid="+vid;
video.onended=s2j_onPlayOver;
//video.addEventListener('ended',j2s_onPlayOver, false);
video.autoplay="true";
video.controls="controls"
container.appendChild(video);
}else{
var swf="http://player.polyv.net/player_polyv_20130926a.swf?vid="+vid;
container.innerHTML = "<OBJECT width='600' height='375' ><PARAM NAME=movie VALUE='"+vid+"'><param name='allowscriptaccess' value='always'>"
+"<param name='allowFullScreen' value='true' />"
+"<EMBED src='"+swf+"' width='600' height='375' TYPE='application/x-shockwave-flash' allowscriptaccess='always' allowFullScreen='true' /></EMBED>"
+"</OBJECT>";
<!-- container.innerHTML = "<OBJECT>"+swf+"</OBJECT>";-->
}
}
printPlayer(index);
/* function j2s_onplayover(){
index++;
printPlayer(index);
} */
function s2j_onPlayOver() {
alert('ssss');
index++;
printPlayer(index);
}
</script>
运行效果：
相关文章
容易被忽略的JS脚本特性，学习js的朋友可以参考下。2011-09-09
这篇文章全面解析了Bootstrap表单的使用方法，本文重点介绍Bootstrap表单控件，感兴趣的小伙伴们可以参考一下2015-11-11
javascript改变position值实现菜单滚动至顶部后固定
现在很多网站都有这样的一个效果，当页面滚动到一定高度时，菜单栏会固定在页面顶部;该效果在 ie6 下不支持，因为ie6不支持 position:fixed,效果很不错，感兴趣的朋友可以了解下啊2013-01-01
下面用js实现可以生成用户所需行数的表格，具体步骤及效果图如下，感兴趣的朋友，可以参考下哈，希望对大家有所帮助2013-07-07
在JavaScript中,所有的值在逻辑上下文中都会被转换为布尔类型（Boolean）,理解这些转换规则对开发者来说至关重要,尤其是在条件判断、短路运算、逻辑非（!）等场景下,正确掌握布尔转换可以避免潜在的bug,本文将详细介绍 JavaScript 其他类型的值是如何转换为布尔值的2025-04-04
这篇文章主要为大家详细介绍了微信小程序实现简单搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
下面小编就为大家带来一篇Js操作DOM元素及获取浏览器高宽的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了通过微信公众平台获取公众号文章的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要为大家详细介绍了javascript中利用柯里化函数实现bind方法，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了Openlayers学习之加载鹰眼控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最新评论