Question

我有一个动态创建HTML5视频元素的脚本，它使用CSS来实现全屏＆＃34; （这是用于交互式数字标牌），当它全屏显示时，用户可以触摸屏幕，男性消失，并通过AJAX将空白文档加载到其中。创建视频时，我希望它能自动循环，但在循环中硬编码甚至使用jQuery添加循环属性，我无法让视频循环播放。我的源代码如下。

的index.php

<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Range</title>
<style>
body {
background-color:#0961A8;
color:white;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
h1 {
color:orange;
}
#left {
width:50%;
height:100%;
position:absolute;
top:0px;
left:0px;
}
#right {
width:50%;
height:100%;
position:absolute;
left:50%;
top:0px;
}
#selector {
overflow-y:scroll;
}
#frame {
border:0px;
width:100%;
height:100%;
overflow-y:scroll;
}
#video-overlay {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
z-index:1000;
display:none;
}
#view {
height:100%;
width:100%;
}
video {
width:100%;
height:100%;
}
#featured {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
z-index:1001;
display:none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="js-saver">
<script src="screensaver.js" id="screensaver"></script>
<script>
function nextvid(){
var random = (Math.floor(Math.random() * 2) == 0) ? 0 - random : random;
if(random == 0){
$( "#promovid" ).attr( "src", "media/5d3.mp4" );
}
if(random == 1){
$( "#promovid" ).attr( "src", "media/eosm.mp4" );
}
}
</script>
</div>
</head>
<body>
<div id="video-overlay">
<div id="view" onclick="closeVid()"></div>
</div>
<div id="featured"></div>
<div id="left" class="noscroll">
<div id="left-top">
<h1>Cairns<br>PC</h1>
<h2>Select a product</h2>
</div>
</div>
<div id="right">
<div id="selector">

<div id="frame">
<?php echo file_get_contents('content.html'); ?>
</div>

</div>
</div>
<script>
document.ready = function() {
var viewportHeight = $(window).height();
$("#frame").css( "height",viewportHeight);
}
</script>
<script>
$(".product").click(function() {
var id = $(this).attr('id');
id += '.html';
$("#video-overlay").css( "display","block");
$( "#view" ).load(id);
$('#screensaver').remove();
}
);
</script>
<script>
function closeVid() {
var id = 'blank.html';
$("#video-overlay").css( "display","none");
$( "#view" ).load(id);
$( "#js-saver" ).html( '<script src="screensaver.js" id="screensaver">&gt/script>');
}
</script>
</body>
</html>

Content.html

<div id="product-1" class="product">
<h2 style="text-align:center;">Vesta-4430Q</h2>
<table border="0" bordercolor="#FFCC00" width="100%" cellpadding="3" cellspacing="3">
    <tr>
        <td><img src="http://cairnspc.com/pcs/intel_files/vesta.jpg" alt="PC"></td>
        <td>NEW! 4th Generation 3.0GHz* Intel Core i5 CPU<br>
            8GB Super-Fast DDR3 Memory<br>
            Quality Gigabyte motherboard<br>
            Super-Fast Samsung SSD<br>
            1TB WD Hard Drive<br>
            802.11n WiFi Card<br>
            Quality 500 Watt PSU<br>
            24X DVD Burner<br>
            Windows 7 Home Premium<br>
            Just $999<br>
        </td>
    </tr>
</table>
</div>

<div id="product-2" class="product">
<h2 style="text-align:center;">Vesta-1</h2>
<table border="0" bordercolor="#FFCC00" width="100%" cellpadding="3" cellspacing="3">
    <tr>
        <td><img src="http://cairnspc.com/resources/VersaH21.jpg" alt="PC"></td>
        <td>NEW! 4th Generation 3.0GHz* Intel Core i5 CPU<br>
            8GB Super-Fast DDR3 Memory<br>
            Quality Gigabyte motherboard<br>
            Super-Fast Samsung SSD<br>
            1TB WD Hard Drive<br>
            802.11n WiFi Card<br>
            Quality 500 Watt PSU<br>
            24X DVD Burner<br>
            Windows 7 Home Premium<br>
            Just $999<br>
        </td>
    </tr>
</table>
</div>

<div id="product-3" class="product">
<h2 style="text-align:center;">Acer Aspire V5-321P</h2>
<table border="0" bordercolor="#FFCC00" width="100%" cellpadding="3" cellspacing="3">
    <tr>
        <td><img src="http://cairnspc.com/pcs/portable/index_files/pasted-graphic.jpg" alt="PC"></td>
        <td>NEW! 4th Generation 3.0GHz* Intel Core i5 CPU<br>
            8GB Super-Fast DDR3 Memory<br>
            Quality Gigabyte motherboard<br>
            Super-Fast Samsung SSD<br>
            1TB WD Hard Drive<br>
            802.11n WiFi Card<br>
            Quality 500 Watt PSU<br>
            24X DVD Burner<br>
            Windows 7 Home Premium<br>
            Just $999<br>
        </td>
    </tr>
</table>
</div>

和screensaver.js

idleTimer = null;
idleState = false;
idleWait = 1000; //For sake of not having to wait 60 seconds

(function ($) {

    $(document).ready(function () {

        $('*').bind('mousemove keydown scroll', function () {

            clearTimeout(idleTimer);

            if (idleState == true) { 

                // Reactivated event
                $("#featured").css( "display","none");
                $( "#featured" ).load('blank.html');           
            }

            idleState = false;

            idleTimer = setTimeout(function () { 

                // Idle Event
                $("#featured").css( "display","block");
                $( "#featured" ).load('featured.html');
                $('video').attr("loop","loop");


                idleState = true; }, idleWait);
        });

        $("body").trigger("mousemove");

    });
}) (jQuery)

function restartSaver() {
                $("#featured").css( "display","none");
                $( "#featured" ).load('blank.html');   
                $("#featured").css( "display","block");
                $( "#featured" ).load('featured.html');
}

jQuery创建的HTML5视频不循环

0 个答案: