www.webdeveloper.com
Results 1 to 3 of 3

Thread: Uncaught SyntaxError: Unexpected token }

  1. #1
    Join Date
    Jul 2013
    Posts
    18

    Uncaught SyntaxError: Unexpected token }

    Hi all,

    i have the following code

    Code:
    <body onload="showvideos()">
    <div id="video_container" style="width:100%">
    
    </div>
    
    
    <script>
    
    function showvideos()
    {
    
    //I do not own the image or the video used in this example, both belong to their respected owners and are being used purely as tests // 
    var videos=[
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    
    ];
    var videoHTML=[];
    var rownumber=4;
    var div_elm = document.getElementById("video_container");
    for(var i=1;i<videos.length;i+=2)
    {
    	videoHTML.push("<image onclick='showpreview('"+ videos[i-1] + "' src='" + videos[i] + "'</image>");	
    	rownumber--;
    	if(rownumber == 0)
    	{
    		videoHTML.push("<br><hr><hr>");
    		rownumber = 4;
    	}
    	div_elm.innerHTML = videoHTML.join(" ");
    	var video_nodes = div_elm.getElementsByTagName("img");
    	for(var num=0;num<video_nodes.length;num++)
    	{
    		video_nodes[num].style.width=(98/rownumber) + "%";
    		video_nodes[num].style.height="200px";
    	}
    }; 
    }
    
    
    
    function showpreview(number)
    {
    var previewelm = document.getElementById("video_container");
    previewelm.innerHTML = "<video width='320' height='240' controls><source src='" + number + "' type='video/mp4'></video>"
    alert(number)
    }
    
    </script>
    </body>
    I am getting the common Uncaught SyntaxError: Unexpected token } error, the problem is I'm not sure as to why ....
    Line 29 and possible the showpreview(number) function as the possible courses that are doing is as I think it is happening when I pass the string to the function.
    I have tried to get around this area of "errors" by passing the videos variable (such as videos[i]) itself but this seems to course completely irrelevant errors so i'm lost.

    Any help would be great,

    Thanks

  2. #2
    Join Date
    Jul 2013
    Posts
    18

    Solved

    Hi all,

    I got round to fixing this today. There was rather a lot of errors in my code, dodgy html with <img> </img> tags, bad quoting and god knowns what else but all in all this script just didn't work sadly.

    Even with many fixes the code would still not give the correct outcome with the string passed to the created img being broken up like (http: text . mp 4) and crazy things like this. I made an alert to show me what the variables were just before being made into a <img> tag and they were all correct yet as soon as they were put into the <img> tag the code just messed up.

    Anyway I remade the code, and ended up with the following with a bit of css to get a feel of what I was trying to accomplish:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    #videobox
    {
    position:absolute;
    left:50%;
    top:30%;
    margin-left:-400px;
    margin-top:-200px;
    min-height:400px;
    min-width:800px;
    display:none;
    z-index:2;
    }
    
    #vidbackground
    {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    background-color:grey;
    opacity:0.8;
    display:none;
    z-index:1;
    }
    </style>
    </head>
    <body onload="showvideosnew()">
    <div id="video_container" style="width:100%">
    </div>
    <div id="videobox">
    </div>
    <div id="vidbackground">
    </div>
    
    <script type="text/javascript">
    
    //I do not own the image or the video used in this example, both belong to their respected owners and are being used purely as tests // 
    var videos=[
    "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4","http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://haignet.co.uk/html5-video-element-test.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://haignet.co.uk/html5-video-element-test.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4","http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://haignet.co.uk/html5-video-element-test.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    'http://haignet.co.uk/html5-video-element-test.mp4',"http://www.okcareertech.org/cac/images/Video_Icon.jpg",
    ];
    
    function showpreview(number)
    {
      var background = document.getElementById("vidbackground");
      var previewelm = document.getElementById("videobox");
      previewelm.innerHTML = "<video width='100%' height='100%' controls><source src=" + number + " type='video/mp4'></video>"
      previewelm.style.display="block";
      background.style.display="block";
    }
    
    
    function showvideosnew()
    {
     var rownumber=5;
     var newelm =[];
     var div_elm = document.getElementById("video_container");
     for(var i=0;i<videos.length;i+=2)
     {
      var videourl = videos[i]
      var videosrc = videos[i+1]
      newelm[i] = document.createElement('IMG');
      newelm[i].setAttribute("onClick","showpreview('" + videourl + "')");
      newelm[i].src = videosrc;
      div_elm.appendChild(newelm[i]);
     }
     var video_nodes = div_elm.getElementsByTagName("IMG");
     for(var num=0;num<video_nodes.length;num++)
     {
    	video_nodes[num].style.width=(98/rownumber) + "%";
    	video_nodes[num].style.height="300px";
     }; 
    }
    </script>
    </body>

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    779
    Even though you've managed to fix the problems, this is another way your images etc could be generated:

    Code:
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    
    			#videobox
    			{
    				position:absolute;
    				left:50%;
    				top:30%;
    				margin-left:-400px;
    				margin-top:-200px;
    				min-height:400px;
    				min-width:800px;
    				display:none;
    				z-index:2;
    			}
    
    			#vidbackground
    			{
    				position: absolute;
    				top: 0;
    				left: 0;
    				right: 0;
    				bottom: 0;
    				background-color:gray;
    				opacity:0.8;
    				display: none;
    				z-index: 1;
    			}
    
    		</style>
    	</head>
    	<body onload="showvideosnew();">
    
    		<div id="video_container"></div>
    		<div id="videobox"></div>
    		<div id="vidbackground"></div>
    
    		<script type="text/javascript">
    
    		//I do not own the image or the video used in this example, both belong to their respected owners and are being used purely as tests //
    		var videos= [
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://haignet.co.uk/html5-video-element-test.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://haignet.co.uk/html5-video-element-test.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://haignet.co.uk/html5-video-element-test.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg',
    			'http://haignet.co.uk/html5-video-element-test.mp4','http://www.okcareertech.org/cac/images/Video_Icon.jpg'
    		];
    
    		function showpreview(number)
    		{
    			var
    				background = document.getElementById('vidbackground'),
    				previewelm = document.getElementById('videobox');
    
    			previewelm.innerHTML     = '<video width="100%" height="100%" controls><source src="' + number + '" type="video/mp4"></video>';
    			previewelm.style.display = 'block';
    			background.style.display = 'block';
    
    			background.onclick = function()
    			{
    				previewelm.innerHTML     = '';
    				previewelm.style.display = 'none';
    				background.style.display = 'none';
    			};
    		}
    
    
    		function showvideosnew()
    		{
    			var
    				div_elm = document.getElementById('video_container'),
    				i, e;
    
    			function videoClick(url)
    			{
    				return function() {showpreview(url);};
    			}
    			for (i = 0; i < videos.length; i += 2) {
    				e              = div_elm.appendChild(document.createElement('img'));
    				e.src          = videos[i + 1];
    				e.style.width  = (98 / 5).toFixed(2) + '%';
    				e.style.height = '300px';
    				e.onclick      = videoClick(videos[i]);
    			}
    		}
    
    		</script>
    	</body>
    </html>
    I also added an onclick for the videos background to close the currently playing video
    Oh, and just to be clear the movies seem to start up ok, but the thumbnail images don't seem to be valid.
    Last edited by bionoid; 12-08-2013 at 06:20 PM.
    JavaScript: Learn | Validate | Compact

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles